html中多个图片轮播代码

HTML中多个图片轮播是一种常见的网页制作方式。在这种制作方法中，我们使用了CSS和JavaScript来实现自动轮播效果。使用HTML和CSS创建轮播容器我们可以首先在HTML中创建容器，然后使用CSS来设置容器的样式。以下是一个简单的HTML和CSS代码示例： ```

<div class="slider">
  <figure>
    <img src="image-1.jpg" alt="image 1">
    <img src="image-2.jpg" alt="image 2">
    <img src="image-3.jpg" alt="image 3">
    <img src="image-4.jpg" alt="image 4">
  </figure>
</div>

.slider {
  width: 100%;
  overflow: hidden;
}

figure {
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  animation: 20s slider infinite;
}

figure img {
  width: 20%;
  float: left;
}

@keyframes slider {
  0% {
    left: 0;
  }
  20% {
    left: 0;
  }
  25% {
    left: -100%;
  }
  45% {
    left: -100%;
  }
  50% {
    left: -200%;
  }
  70% {
    left: -200%;
  }
  75% {
    left: -300%;
  }
  95% {
    left: -300%;
  }
  100% {
    left: -400%;
  }
}

这段代码中，我们创建了一个名为“slider”的div容器，并在其中嵌套了一个“figure”元素，其中包含四个图像。使用JavaScript自动轮播要实现自动轮播效果，我们需要使用JavaScript来设置定时器，以便在每个固定的间隔时间内使图片向左移动一定距离。以下是示例代码： ```

html中多个图片轮播代码

var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByTagName("img");
  for (i = 0; i  slides.length) {
    slideIndex = 1;
  }
  slides[slideIndex - 1].style.display = "block";
  setTimeout(showSlides,2000);
}

这段代码中，我们首先创建了一个名为“slideIndex”的变量，其默认值为0。然后我们定义了一个名为“showSlides（）”的函数，并在函数中使用了一个for循环和if语句来控制图像的显示和隐藏，并且设定了定时器的间隔时间为2000毫秒即2秒，每隔2S就会自动轮播。配合HTML和CSS代码，使用JavaScript设置的定时器就可以帮助我们实现完整的自动轮播效果了。

html中多个图片轮播代码

相关推荐