CSS和JS的多張圖片滾動(dòng)是現(xiàn)代網(wǎng)頁設(shè)計(jì)中非常流行的特效之一，它可以讓頁面顯得更為生動(dòng)、時(shí)尚，增加用戶體驗(yàn)。下面將提供一個(gè)基礎(chǔ)的CSS和JS多張圖片滾動(dòng)特效實(shí)現(xiàn)。

/*CSS部分*/
.slider{
width: 100%;
overflow: hidden;
position: relative;
}
.slider ul{
width: 3400px;
list-style: none;
position: relative;
transition: 2s;
left: 0;
}
.slider li{
float: left;
width: 680px;
}
.slider img{
width: 100%;
}
/*JS部分*/
var slider = document.querySelector('.slider ul');
var imgs = document.querySelectorAll('.slider img');
var imgWidth = imgs[0].clientWidth;
var current = 0;
var totalImg = imgs.length;
var autoplay = true;
function autoPlay(){
setInterval(function(){
slider.style.transition = '2s';
slider.style.transform = 'translateX('+(-imgWidth*current)+'px)';
current++;
if(current >= totalImg){
current = 0;
setTimeout(function(){
slider.style.transition = 'none';
slider.style.transform = 'translateX(0)';
}, 2000);
}
}, 3000);
}
if(autoplay){
autoPlay();
}

HTML部分可以根據(jù)需要修改，下面提供一個(gè)參考HTML：

以上就是一個(gè)簡(jiǎn)單的CSS和JS多張圖片滾動(dòng)特效的實(shí)現(xiàn)，大家可以根據(jù)自己的需要進(jìn)行修改和優(yōu)化。