html js图切换(代码示例)

HTML和JS图切换可以通过使用JavaScript来实现。我们需要在HTML中创建一个包含多个图片的容器，然后使用CSS将其隐藏起来。接下来，我们可以使用JavaScript来控制图片的显示和隐藏，从而实现图切换的效果。

我们需要在HTML中创建一个包含多个图片的容器。可以使用`<div>`元素来创建容器，并为其设置一个唯一的ID，以便在JavaScript中使用。例如：

<div id="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将图片容器隐藏起来。可以使用`display: none;`样式来隐藏元素。例如：

#image-container {
  display: none;
}

然后，我们可以使用JavaScript来控制图片的显示和隐藏。我们需要获取图片容器的引用，并将其存储在一个变量中。然后，我们可以使用`getElementById`方法来获取元素的引用。例如：

var imageContainer = document.getElementById("image-container");

接下来，我们可以使用JavaScript中的`setInterval`函数来定时更改图片的显示。`setInterval`函数接受两个参数：要执行的函数和时间间隔（以毫秒为单位）。在这个例子中，我们将使用一个计数器变量来跟踪当前显示的图片的索引。然后，我们可以在每个时间间隔内更新计数器，并根据计数器的值来显示相应的图片。例如：

var images = imageContainer.getElementsByTagName("img");
var currentIndex = 0;
setInterval(function() {
  images[currentIndex].style.display = "none";
  currentIndex = (currentIndex + 1) % images.length;
  images[currentIndex].style.display = "block";
}, 2000);

在上面的代码中，我们首先使用`getElementsByTagName`方法获取所有的`<img>`元素，并将其存储在一个变量中。然后，我们使用一个计数器变量`currentIndex`来跟踪当前显示的图片的索引。在每个时间间隔内，我们首先隐藏当前显示的图片，然后更新计数器，并根据计数器的值显示下一张图片。

通过以上步骤，我们可以实现一个简单的HTML和JS图切换效果。当页面加载完成后，图片容器将被隐藏起来，并且每隔2秒钟，图片将自动切换显示。