图片滚动js特效代码

图片滚动效果是一种常见的网页设计元素，用于展示一系列图片，通常是通过水平或垂直滚动的方式。以下是一个简单的图片滚动JavaScript特效代码示例，以及相关的基础概念和优化建议。

基础概念

JavaScript动画：通过定时器（如setInterval或requestAnimationFrame）不断更新元素的位置来实现动画效果。
CSS样式：用于设置图片容器的布局和图片的显示方式。
DOM操作：JavaScript用于动态修改HTML元素的内容和样式。

代码示例

以下是一个简单的水平图片滚动效果的代码：

<!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;
  }
</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 images = scrollingDiv.getElementsByTagName('img');
  var totalWidth = 0;

  for (var i = 0; i < images.length; i++) {
    totalWidth += images[i].offsetWidth;
  }

  var scrollSpeed = 1; // 滚动速度
  var currentPosition = 0;

  setInterval(function() {
    currentPosition -= scrollSpeed;
    if (-currentPosition >= totalWidth) {
      currentPosition = scrollingDiv.offsetWidth;
    }
    scrollingDiv.style.transform = 'translateX(' + currentPosition + 'px)';
  }, 20);
}

window.onload = scrollImages;
</script>

</body>
</html>