手写轮播图（重点看js）

笑到根本停不下来的Kathy思

已于 2022-05-26 17:15:08 修改

阅读量1.2k

点赞数 2

分类专栏：前端文章标签： javascript 前端 html

于 2022-05-26 17:04:20 首次发布

本文链接：https://blog.csdn.net/weixin_44478371/article/details/124987552

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

手写轮播图实现

原理：本轮播图的实现原理就是准备一个只有一张图片大小的容器，将很多图片通过绝对定位放入其中。通过一个active类对它的z-index和opacity属性调整，这样就能让用户看到图片在变化。同时采用setInterval定时器实现一个轮播的效果。

思路：

首先是最基础的页面布局。需要注意 z-index属性只能在position:absolute上使用。
第一张图片和最后一张图片比较特殊，需要留意。
关于小圆点的点击，需要设置data-index属性以通过getAttribute()方法获取当前点击的是第几个小圆点。
querySelectorAll()会获取整个页面的元素，然后组成一个数组。

<!DOCTYPE html>
<html>
  <head>
    <style>
      .wrap {
        width: 800px;
        height: 400px;
        position: relative;
      }
      .list {
        width: 800px;
        height: 400px;
        position: relative;
        padding-left: 0px;
      }
      .item {
        width: 100%;
        height: 100%;
        list-style: none;
        position: absolute;
        left: 0;
        opacity: 0;
        transition: all 0.8s;
      }
      .item:nth-child(1) {
        background-color: skyblue;
      }
      .item:nth-child(2) {
        background-color: yellowgreen;
      }
      .item:nth-child(3) {
        background-color: rebeccapurple;
      }
      .item:nth-child(4) {
        background-color: pink;
      }
      .item:nth-child(5) {
        background-color: orange;
      }
      .item.active {
        z-index: 10;
        opacity: 1;
      }
      .btn {
        width: 60px;
        height: 100px;
        z-index: 100;
        top: 150px;
        position: absolute;
      }
      #leftBtn {
        left: 0px;
      }
      #rightBtn {
        right: 0px;
      }
      .pointList {
        list-style: none;
        padding-left: 0px;
        position: absolute;
        right: 20px;
        bottom: 20px;
        z-index: 200;
      }
      .point {
        width: 10px;
        height: 10px;
        background-color: antiquewhite;
        border-radius: 100%;
        float: left;
        margin-right: 8px;
        border-style: solid;
        border-width: 2px;
        border-color: slategray;
        cursor: pointer;
      }
      .point.active {
        background-color: cadetblue;
      }
    </style>
  </head>

  <body>
    <div class="wrap">
      <ul class="list">
        <li class="item active">0</li>
        <li class="item">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
        <li class="item">4</li>
      </ul>
      <ul class="pointList">
        <!-- 需要使用data-index记录点击的是第几个小圆点 -->
        <li class="point active" data-index="0"></li>
        <li class="point" data-index="1"></li>
        <li class="point" data-index="2"></li>
        <li class="point" data-index="3"></li>
        <li class="point" data-index="4"></li>
      </ul>
      <button class="btn" id="leftBtn"><</button>
      <button class="btn" id="rightBtn">></button>
    </div>
    <script>
      // 一般建议使用querySelector而不是getElementById...
      var items = document.querySelectorAll('.item') //图片
      var points = document.querySelectorAll('.point') //点
      var left = document.getElementById('leftBtn')
      var right = document.getElementById('rightBtn')
      var all = document.querySelector('.wrap')

      // 当前第几个元素的索引
      var index = 0

      //清除active方法
      var clearActive = function () {
        for (i = 0; i < items.length; i++) {
          items[i].className = 'item'
        }
        for (j = 0; j < points.length; j++) {
          points[j].className = 'point'
        }
      }

      //改变active方法
      var goIndex = function () {
        clearActive()
        items[index].className = 'item active'
        points[index].className = 'point active'
      }
      //左按钮事件
      var goLeft = function () {
        if (index == 0) {
          index = 4
        } else {
          index--
        }
        goIndex()
      }

      //右按钮事件
      var goRight = function () {
        if (index < 4) {
          index++
        } else {
          index = 0
        }
        goIndex()
      }

      //绑定点击事件监听
      left.addEventListener('click', function () {
        goLeft()
      })

      right.addEventListener('click', function () {
        goRight()
      })

      for (i = 0; i < points.length; i++) {
        points[i].addEventListener('click', function () {
          var pointIndex = this.getAttribute('data-index')
          index = pointIndex
          goIndex()
        })
      }
      //计时器
      var timer
      function play() {
        timer = setInterval(() => {
          goRight()
        }, 2000)
      }
      play()
      //移入清除计时器
      all.onmouseover = function () {
        clearInterval(timer)
      }
      //移出启动计时器
      all.onmouseleave = function () {
        play()
      }
    </script>
  </body>
</html>