当先锋百科网

首页 1 2 3 4 5 6 7

CSS和JS的多张图片滚动是现代网页设计中非常流行的特效之一,它可以让页面显得更为生动、时尚,增加用户体验。下面将提供一个基础的CSS和JS多张图片滚动特效实现。

/*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部分可以根据需要修改,下面提供一个参考HTML:

以上就是一个简单的CSS和JS多张图片滚动特效的实现,大家可以根据自己的需要进行修改和优化。