css js图片滚动

CSS、JS图片滚动是网站开发中常见的一种特效，可以让网页内容更具有活力和吸引力。本文将向您介绍如何实现简单的图片滚动效果。

首先，我们需要用HTML将图片以列表方式展现出来：

<div class="scroll">
   <ul>
      <li><img src="image1.jpg"></li>
      <li><img src="image2.jpg"></li>
      <li><img src="image3.jpg"></li>
      <li><img src="image4.jpg"></li>
   </ul>
</div>

接下来，我们可以使用CSS来控制图片的展示效果。我们把图片容器div的宽度设置为图片的宽度乘以图片数量，然后设置overflow:hidden，这样我们就可以只显示一张图片。

.scroll{
   width: 700px; /* 图片的宽度为700px */
   overflow: hidden;
}
.scroll ul{
   width: 2800px; /* 图片数量为4，所以宽度为700*4 */
   padding: 0;
   margin: 0;
}
.scroll ul li{
   float: left;
   list-style: none;
}

然后，我们需要使用JavaScript来实现图片自动滚动的效果。在这里，我们可以使用setInterval()方法；每隔一段时间，我们可以将第一张图片移动到最后一张后面。

var scroll = document.querySelector('.scroll ul');
var scrollWidth = document.querySelector('.scroll ul li').offsetWidth;
var leftValue = 0;

setInterval(function(){
   scroll.style.transition = "left 1s";
   leftValue -= scrollWidth;
   scroll.style.left = leftValue + "px";
   
   var firstPic = scroll.querySelector('li:first-child');
   scroll.appendChild(firstPic);
   scroll.style.left = "0";
}, 3000); //每隔3秒钟滚动一次

最后，我们就可以看到，图片可以自动滚动展示，给网站带来了强烈的视觉冲击力。

总之，CSS、JS图片滚动是一个非常实用和典型的特效，实现简单而又美观。通过这种方法，我们可以让网站更加生动有趣，吸引更多用户的关注。