js特效图片滚动代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片滚动特效</title>
<style>
  #scrollingDiv {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
  }
  #scrollingDiv img {
    width: 200px;
    height: auto;
    display: inline-block;
    margin-right: 10px;
  }
</style>
</head>
<body>

<div id="scrollingDiv">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
  <!-- 更多图片 -->
</div>

<script>
function scrollImages() {
  var scrollingDiv = document.getElementById('scrollingDiv');
  var scrollSpeed = 1; // 滚动速度
  scrollingDiv.scrollLeft += scrollSpeed;
  if (scrollingDiv.scrollLeft >= scrollingDiv.scrollWidth - scrollingDiv.clientWidth) {
    scrollingDiv.scrollLeft = 0; // 循环滚动
  }
}

setInterval(scrollImages, 50); // 每50毫秒滚动一次
</script>

</body>
</html>