web中如何实现图片循环显示_教你如何正确高效的学习web前端（适用于新手小白）...

要实现图片循环显示，可以使用HTML和CSS来创建一个轮播图。以下是一个简单的示例：

HTML代码：

<div class="slideshow-container">
  <img class="mySlides" src="image1.jpg">
  <img class="mySlides" src="image2.jpg">
  <img class="mySlides" src="image3.jpg">
</div>

CSS代码：

.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

.mySlides {
  display: none;
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
}

/* 图片轮播效果 */
.mySlides:first-child {
  display: block;
}

/* 添加动画效果 */
.mySlides {
  animation-name: fade;
  animation-duration: 1s;
}

@keyframes fade {
  from {
    opacity: .4
  }

  to {
    opacity: 1
  }
}

在这个示例中，我们首先创建了一个包含图片的容器，并设置了最大宽度和相对定位。然后，我们使用CSS隐藏了所有的图片，并将第一张图片显示出来。

接下来，我们创建了一个“fade”动画，并将其应用于所有的图片。当新的图片显示时，旧的图片会淡出，新的图片则淡入。

最后，我们需要使用JavaScript循环显示图片。这里我们使用了setInterval函数来每隔一段时间自动切换到下一张图片。

JavaScript代码：

var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slideIndex++;
  if (slideIndex > slides.length) {
    slideIndex = 1
  }
  slides[slideIndex - 1].style.display = "block";
  setTimeout(showSlides, 2000); // 切换时间为2秒
}

在这个示例中，我们首先声明一个变量“slideIndex”，并将其初始化为0。然后，我们定义了一个名为“showSlides”的函数，并在其中使用了一个循环来隐藏所有的图片。

接下来，我们将“slideIndex”增加1，并检查是否超出了图片的数量。如果超出了，我们将“slideIndex”重置为1。

最后，我们将当前的图片显示出来，并使用setTimeOut函数来在2秒后再次调用“showSlides”函数，以便切换到下一张图片。

这就是一个基本的图片轮播的实现方法。当然，还有很多其他的方式可以实现图片循环显示，但这个示例可以帮助你快速入门。