javascript滚动图片特效_js滚动图片怎么做：代码示例

JavaScript滚动图片特效可以通过使用CSS和JavaScript结合实现。我们可以通过CSS设置图片容器的宽度和高度，并将其设置为overflow:hidden，以便隐藏超出容器大小的部分。然后，我们可以使用JavaScript来控制图片容器的滚动效果。

示例代码如下：

HTML部分：

<div class="bf88-f6b6-722f-35da image-container">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>

CSS部分：

.image-container {
  width: 400px;
  height: 200px;
  overflow: hidden;
}
.image-container img {
  width: 100%;
  height: auto;
  display: block;
}

JavaScript部分：

var imageContainer = document.querySelector('.image-container');
var images = imageContainer.getElementsByTagName('img');
var currentIndex = 0;
var interval;
function startScrolling() {
  interval = setInterval(scrollImages, 2000);
}
function scrollImages() {
  currentIndex++;
  if (currentIndex >= images.length) {
    currentIndex = 0;
  }
  imageContainer.style.transform = 'translateX(-' + currentIndex * 100 + '%)';
}
startScrolling();

在上面的示例代码中，首先我们通过document.querySelector('.image-container')获取到图片容器的DOM元素，然后使用getElementsByTagName('img')获取到所有的图片元素。接下来，我们定义了一个currentIndex变量来记录当前显示的图片索引，并使用setInterval函数每隔2秒调用一次scrollImages函数来实现图片的滚动效果。在scrollImages函数中，我们通过改变图片容器的transform属性来实现图片的滚动，通过将translateX的值设置为负的currentIndex乘以100%，可以实现每次滚动一个图片的效果。

以上就是使用JavaScript实现滚动图片特效的代码示例。