轮播图的实现

牛仔在哪
已于 2023-02-09 14:54:21 修改
阅读量212
点赞数
文章标签： javascript
于 2022-08-01 15:40:13 首次发布
本文链接：https://blog.csdn.net/ape_003/article/details/126102643
版权
<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>轮播图之自动轮播</title>

    <style>

      * {

        margin: 0;

        padding: 0;

      }

      #box {

        position: relative;

        margin: 30px auto;

        width: 600px;

        height: 600px;

        border: 1px solid red;

      }

      #parent {

        width: 600px;

        height: 400px;

        border: 1px solid black;

        overflow: hidden;

      }

      #child {

        width: 2400px;

        height: 400px;

      }

      #child > img {

        width: 600px;

        height: 400px;

        display: block;

        float: left;

      }

      ul#dottedList {

        position: absolute;

        left: 100px;

        top: 350px;

        list-style: none;

        overflow: hidden;

      }

      ul#dottedList > li {

        float: left;

        width: 30px;

        height: 30px;

        border: 1px solid blue;

        box-sizing: border-box;

        text-align: center;

        line-height: 30px;

        font-size: 22px;

        border-right: none;

      }

      ul#dottedList > li:last-child {

        border-right: 1px solid blue;

      }

      #leftBtn,

      #rightBtn {

        position: absolute;

        top: 170px;

        width: 40px;

        height: 60px;

        background-color: black;

        opacity: 0.3;

        color: white;

        text-align: center;

        line-height: 60px;

        font-size: 30px;

      }

      #leftBtn {

        left: 0;

      }

      #rightBtn {

        right: 0;

      }

    </style>

  </head>

  <body>

    <div id="box">

      <!-- 轮播图父元素 -->

      <div id="parent">

        <div id="child">

          <img src="./images/1.jpg" alt="" />

          <img src="./images/2.jpg" alt="" />

          <img src="./images/3.jpg" alt="" />

          <img src="./images/4.jpg" alt="" />

        </div>

      </div>

      <!-- 四个小点 -->

      <ul id="dottedList">

        <li style="background-color: red">1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

      </ul>

      <!-- 左右按钮 -->

      <div id="leftBtn">左</div>

      <div id="rightBtn">右</div>

    </div>

  </body>

  <script>

    /*

      轮播图图的原理：

        让轮播图父元素的宽度等于图片的宽度，轮播图子元素的宽度是四张图片的宽度，所以父元素就会产生scrollLeft值

        通过定时器，，每隔一段时间滚动一张图片的宽度

      */

    //1、自动轮播

    // 获取操作对象

    var parent = document.getElementById('parent');

    var imgObj = document.getElementById('child').getElementsByTagName('img')[0];

    // 初始显示图片的顺序

    var num = 0;

    // 声明轮播函数

    var timerClock;

    // 页面加载完成后，调用自动轮播

    clock();

    // 封装一个自动轮播函数

    function clock() {

      // 为轮播添加计时器

      timerClock = setInterval(move, 2000);

    }

    // 在计时器函数中 为每张图片定义一个顺序

    function move() {

      num++;

      // 到第四张图片后返回第一张

      if (num > 3) {

        num = 0;

      }

      // 到第一张图片后向左会返回第四张

      if (num < 0) {

        num = 3;

      }

      changeBgColor();

      // 为图片挪动指定参数及函数体

      slowMove(parent.scrollLeft, imgObj.clientWidth * num);

    }

    // 声明一个缓慢轮播的函数

    function slowMove(start, end) {

      // 设置挪动次数的初始值

      var step = 0;

      // 设置挪动次数的最大值

      var maxStep = 10;

      // 设置每次挪动的距离

      var everyStep = (end - start) / maxStep;

      // 为图片挪动加计时器

      var timerSlowMove = setInterval(function () {

        step++;

        // 每完成一张图片的挪动 移动的初始距离和最终距离都相应发生改变 但差值始终为图片宽度

        if (step <= maxStep) {

          parent.scrollLeft = parent.scrollLeft + everyStep;

        } else {

          clearInterval(timerSlowMove);

        }

        // 在图片挪动的过程中 完成此过程的时间间隔必须在自动轮播的时间间隔之内

        // 此外 要预留图片的展示时间 即 挪动的时间 + 展示的时间 <= 自动轮播的时间间隔

      }, 50);

    }

    // 2、点击小点轮播

    // 获取操作对象

    var dottedLi = document.getElementById('dottedList').getElementsByTagName('li');

    // 对操作对象遍历 遍历的同时为每个对象添加点击事件

    for (var i = 0; i < dottedLi.length; i++) {

      // 设置点击事件函数

      dottedLi[i].onclick = function () {

        // 清除一下自动轮播，展示、单击需要消耗时间

        clearInterval(timerClock);

        console.log(this);

        // 判断单击的小点是否是当前的小点

        // 对小点进行循环 以检查图片顺序与小点的顺序是否统一

        // 同时 使之与图片绑定 （顺序相同） 并且 可以继续进行轮播

        for (var j = 0; j < dottedLi.length; j++) {

          if (dottedLi[j] == this) {

            num = j;

            // 给小点添加了颜色变换的函数 可以实现点击变色 以及通知变色

            changeBgColor();

            // 调用图片的挪动函数

            slowMove(parent.scrollLeft, imgObj.clientWidth * num);

          }

        }

        // 重新启用自动轮播

        clock();

      }

    }

    // 3、单击左右按钮轮播

    // 获取操作对象

    var leftBtn = document.getElementById('leftBtn');

    var rightBtn = document.getElementById('rightBtn');

    // 设置右侧点击事件

    rightBtn.onclick = function () {

      //  清除轮播计时器目的是 使不论在什么时段点击某个图片 该图片都会预留自动轮播的时间间隔 不发生时间冲突

      clearInterval(timerClock);

      // 再次调用计时器函数中的顺序函数

      move();

      // 重新启用自动轮播

      clock();

    }

    // 设置左侧点击事件

    leftBtn.onclick

    = function () {

      //  清除轮播计时器目的是 使不论在什么时段点击某个图片 该图片都会预留自动轮播的时间间隔 不发生时间冲突

      clearInterval(timerClock);

      // 每次点击使顺序减2为不是减1 使因为在计时器函数的确定顺序的函数中 num会加1 防止抵消

      num -= 2;

      // 再次调用计时器函数中的顺序函数

      move();

      // 重新启用自动轮播

      clock();

    }

    // 封装一个小点变色函数

    function changeBgColor() {

      // 先让所有的小点都变成白色

      for (var i = 0; i < dottedLi.length; i++) {

        dottedLi[i].style.backgroundColor = '';

      }

      //使显示的图片的绑定小点显示颜色

      dottedLi[num].style.backgroundColor = 'red';

    }

  </script>

  <!-- ps

    如果图片点击切换速度太快会出现抖动与停止位置错误的现象

    目前我还不会解决 但影响不大  ( •̀ ω •́ )

  -->

</html>