Html轮播图实现（原生js方式）

2023-06-30 10:26 作者：Admin

大概思路：

1. 使用一个控件作为图片显示区域，且图片都在相同的区域显示；

2. 通过Js写个遍历函数，每次只让一张图片显示，如style = " display：none "可以影藏其他图片；

3. 通过定时器每隔一段时间调用该函数；

4. 这里测试的图片是手动添加的地址，可以根据实际需要循环添加；

Html、Javascript：

<!-- 语言: Html、Css、Javascript -->
<!-- 工具: HbuilderX -->
<!-- 使用Ctrl+/ 可快速多行注释/取消注释 -->

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>轮播图测试</title>
    <!-- 外部导入Css文件，链接式 -->
    <link type="text/css" rel="stylesheet" href="css/slideShow.css" />
  </head>

  <body>
    <p>测试轮播图</p>
    <hr id="hr1" />
    <!-- 建立一个div控件作为图片框 -->
    <div class="imgBox">
      <!-- alt：图片路径失败时替换显示内容 -->
      <img class="img-slide img" src="img/img1.jpg" alt="img1" />
      <img class="img-slide img" src="img/img2.jpg" alt="img2" />
      <img class="img-slide img" src="img/img3.jpg" alt="img3" />
      <img class="img-slide img" src="img/img4.jpg" alt="img4" />
      <img class="img-slide img" src="img/img5.jpg" alt="img5" />
    </div>
  </body>

  <script type="text/javascript">
    // index：索引， len：长度
    var index = 0,
      len;
    // 类似获取一个元素数组
    var imgBox = document.getElementsByClassName("img-slide");
    len = imgBox.length;
    imgBox[index].style.display = "block";
    // 逻辑控制函数
    function slideShow() {
      index++;
      // 防止数组溢出
      if (index >= len) index = 0;
      // 遍历每一个元素
      for (var i = 0; i < len; i++) {
        imgBox[i].style.display = "none";
      }
      // 每次只有一张图片显示
      imgBox[index].style.display = "block";
    }

    // 定时器，间隔3s切换图片
    setInterval(slideShow, 3000);
  </script>
</html>

Css：

/* 标签选择器 */
p {
	text-align: center;
	font-size: 25px;
	color: cadetblue;
	font-family: fantasy;
}

/* id选择器 */
#hr1 {
	background-color: cadetblue;
	height: 2px;
	width: 75%;
}

/* 类选择器 */
.imgbox {
	border-top: 5px solid cadetblue;
    /* 避免因窗口变化影响图片效果 */
	width: 60%;
	height: 40%;
	margin: 0 auto;
}

.img {
	width: 60%;
	height: 40%;
	margin: 0 auto;
	display: none;
}

运行效果：

文章来源：https://www.cnblogs.com/zq-zq/p/12711052.html

标签： #轮播图 #HTML #JavaScript