html + js 简单实现轮播图

2023-07-08 03:49 作者：Admin

哎，刚刚看到自己昨天写的如何实现搜索框获得了两个喜欢哎，真的是开心，感谢你们的喜欢。

咳咳，回归正题。今天要分享的是如何利用 html + js 实现轮播图。先来看下效果：

当然啦，图片轮播可不止这点东西，有空再完善啦

实现思路如下：

1、设置所有图片的 display 属性为 none

2、设置一个 index 用来标志获取到的图片

3、设置一个定时器，每隔一段时间令 index 自增并将对应的图片的 display 属性改为 block

附上代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>轮播图实现</title>
    <style type="text/css">
      /*标题样式*/
      p {
        text-align: center;
        font-size: 25px;
        color: cadetblue;
        font-family: fantasy;
      }

      .imgBox {
        border-top: 2px solid cadetblue;
        width: 50%;
        height: 500px;
        margin: 0 auto;
      }

      .imgBox img {
        width: 60%;
        height: 300px;
        margin: 0 auto;
        padding-top: 30px;
      }

      .img1 {
        display: block;
      }

      .img2 {
        display: none;
      }

      .img3 {
        display: none;
      }
    </style>
  </head>
  <body>
    <p>图片轮播</p>
    <div class="imgBox">
      <img class="img-slide img1" src="images/1.jpg" alt="1" />
      <img class="img-slide img2" src="images/2.jpg" alt="2" />
      <img class="img-slide img3" src="images/3.jpg" alt="3" />
    </div>
  </body>
  <script type="text/javascript">
    var index = 0;
    //改变图片
    function ChangeImg() {
      index++;
      var a = document.getElementsByClassName("img-slide");
      if (index >= a.length) index = 0;
      for (var i = 0; i < a.length; i++) {
        a[i].style.display = "none";
      }
      a[index].style.display = "block";
    }
    //设置定时器，每隔两秒切换一张图片
    setInterval(ChangeImg, 2000);
  </script>
</html>

如果你觉得我写的还不错的话，点个赞啦~

文章来源：https://www.jianshu.com/p/f84b76b67e86

标签： #轮播图 #HTML #JavaScript