html五张图片的轮播代码

今天我们来学习如何编写一个简单的 HTML 图片轮播效果。以下是一个 HTML 轮播效果的实现方式：

!DOCTYPE html>
    html>
    head>
      meta charset="UTF-8">
      title>
    图片轮播效果/title>
      style>
    .container {
          position: relative;
    }
    .slider {
          position: absolute;
          width: 100%;
          height: 300px;
          overflow: hidden;
    }
    .slider img {
          width: 100%;
          height: 100%;
          display: none;
    }
      /style>
    /head>
    body>
      div class="container">
        div class="slider">
          img src="image01.jpg" alt="">
          img src="image02.jpg" alt="">
          img src="image03.jpg" alt="">
          img src="image04.jpg" alt="">
          img src="image05.jpg" alt="">
        /div>
      /div>
      script>
        var slider = document.querySelector('.slider');
        var imgs = document.querySelectorAll('.slider img');
        var index = 0;
    function showImg() {
          for(var i=0;
     iimgs.length;
 i++) {
            imgs[i].style.display = 'none';
      }
          imgs[index].style.display = 'block';
          index++;
      if(index == imgs.length) {
            index = 0;
      }
          setTimeout(showImg, 3000);
    }
        showImg();
      /script>
    /body>
    /html>
    

首先，我们在 HTML 代码中添加了一个容器 div 和一个嵌套在容器中的 div，容器 div 的样式设置为 position: relative，而嵌套的 div 样式设置为 position: absolute，这是为了使图片轮播能在容器内显示。

其次，我们在嵌套的 div 中添加了五张要轮播的图片。我们需要将这些图片的样式设置为 display: none，这样它们就不会在页面中显示出来。

然后，在 JavaScript 中，我们首先获取到轮播容器和那五张图片的元素，并定义一个变量 index，代表当前轮播到第几张图片。

接着，我们编写了一个名为 showImg 的函数，该函数会遍历图片元素，将所有的图片都设置为不显示，并将当前轮播到的图片设置为显示状态。然后，我们将 index 值加 1，如果 index 值等于图片数量，则将 index 设为 0。

最后，我们使用 setTimeout 函数来不断调用 showImg 函数，实现轮播效果。这里我们将轮播时间设置为 3 秒。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！