js 图片滚动显示-代码示例

图片滚动显示是一种常见的网页效果，通过JavaScript代码可以实现。实现图片滚动显示的基本思路是通过定时器控制图片的显示和隐藏。我们需要定义一个包含多张图片的容器，然后通过JavaScript代码来控制图片的显示和隐藏。

示例代码如下：

HTML部分：

<div id="imageContainer">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>

CSS部分：

#imageContainer {
  width: 400px;
  height: 200px;
  overflow: hidden;
}
#imageContainer img {
  display: none;
  width: 100%;
  height: 100%;
}

JavaScript部分：

var imageIndex = 0;
var images = document.querySelectorAll("#imageContainer img");
function showNextImage() {
  images[imageIndex].style.display = "none";
  imageIndex = (imageIndex + 1) % images.length;
  images[imageIndex].style.display = "block";
}
setInterval(showNextImage, 2000);

在上面的示例代码中，我们首先定义了一个id为"imageContainer"的容器，用来包含多张图片。然后，通过CSS代码设置容器的宽度和高度，并将图片的display属性设置为none，使图片默认隐藏。

接下来，在JavaScript代码中，我们定义了一个变量imageIndex来记录当前显示的图片索引，以及一个images数组来存储所有的图片元素。showNextImage函数用于显示下一张图片，它首先将当前显示的图片隐藏，然后更新imageIndex的值，再将新的图片显示出来。

我们使用setInterval函数来定时调用showNextImage函数，实现图片的自动滚动显示效果。在上面的示例中，每隔2秒钟就会显示下一张图片。

通过以上的代码示例，我们可以实现一个简单的图片滚动显示效果。你可以根据实际需求修改图片路径、容器尺寸、滚动间隔等参数来适应不同的网页设计。