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多张图片滚动特效的实现,大家可以根据自己的需要进行修改和优化。