JS简易轮播图实现

最新推荐文章于 2024-04-02 18:03:14 发布

前端wikc

最新推荐文章于 2024-04-02 18:03:14 发布

阅读量190

点赞数

文章标签： javascript 前端 html css

本文链接：https://blog.csdn.net/qq_64469057/article/details/128417511

版权

实现思路：

这可能是轮播图最简单点的实现之一，通过更改图片的src来实现该效果，首先需要将图片命名格式统一比如pic01.jpg，pic02.jpg…,再通过js使用定时器去改变img标签里面的src图片链接的名字来实现切换效果。代码如下：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>轮播图实现01</title>
  <style type="text/css">
    .carousel {
      width: 900px;
      height: 400px;
      margin: 100px auto;
    }

    .carousel img {
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>
  <!--轮播图模块 -->
  <div class="carousel">
    <img id="carousel_img" src="./pic/img3.jpg">
  </div>
  <!-- Js代码 -->
  <script>
    var index = 1;
    function carousel() {
      index++;
      //判断index是否大于3
      if (index > 3) {
        index = 1;
      }
      //获取img对象
      var img = document.getElementById("carousel_img");
      img.src = "./pic/img" + index + ".jpg";
    }
    //2.定义定时器
    setInterval(carousel, 2000);
        /*切记定时器里调用carousel方法不能加(),setInterval(carousel,2000);如果加()会执行carousel（）方法，而导致定时器没用。*/
  </script>
</body>

</html>

实现效果图