独立出来的几种轮播图写法

轮播图的几种写法

第一种方法——轮播图加动画函数（推荐这种）

index.js

window.addEventListener('load', function () {
  // 1. 获取元素
  var arrow_l = document.querySelector('.arrow-l');
  var arrow_r = document.querySelector('.arrow-r');
  var focus = document.querySelector('.focus');
  var focusWidth = focus.offsetWidth;
  // 2. 鼠标经过focus 就显示隐藏左右按钮
  focus.addEventListener('mouseenter', function () {
    arrow_l.style.display = 'block';
    arrow_r.style.display = 'block';
    clearInterval(timer);// 清除定时器
    timer = null; // 清除定时器变量
  });
  focus.addEventListener('mouseleave', function () {
    arrow_l.style.display = 'none';
    arrow_r.style.display = 'none';
    timer = setInterval(function () {
      //手动调用点击事件
      arrow_r.click();
    }, 2000);
  });

  // 3. 动态生成小圆圈  有几张图片，我就生成几个小圆圈
  var ul = focus.querySelector('ul');
  var ol = focus.querySelector('.circle');
  // console.log(ul.children.length);
  for (var i = 0; i < ul.children.length; i++) {
    // 创建一个小li 
    var li = document.createElement('li');
    // 记录当前小圆圈的索引号 通过自定义属性来做 
    li.setAttribute('index', i);
    // 把小li插入到ol 里面
    ol.appendChild(li);
    // 4. 小圆圈的排他思想 我们可以直接在生成小圆圈的同时直接绑定点击事件
    li.addEventListener('click', function () {
      // 干掉所有人 把所有的小li 清除 current 类名
      for (var i = 0; i < ol.children.length; i++) {
        ol.children[i].className = '';
      }
      // 留下我自己  当前的小li 设置current 类名
      this.className = 'current';
      // 5. 点击小圆圈，移动图片 当然移动的是 ul 
      // ul 的移动距离 小圆圈的索引号 乘以 图片的宽度 注意是负值
      // 当我们点击了某个小li 就拿到当前小li 的索引号
      var index = this.getAttribute('index');
      // 当我们点击了某个小li 就要把这个li 的索引号给 num  
      num = index;
      // 当我们点击了某个小li 就要把这个li 的索引号给 circle  
      circle = index;
      // num = circle = index;
      console.log(focusWidth);
      console.log(index);

      animate(ul, -index * focusWidth);
    })
  }

  // 把ol里面的第一个小li设置类名为 current
  ol.children[0].className = 'current';
  // 6. 克隆第一张图片(li)放到ul 最后面
  var first = ul.children[0].cloneNode(true);
  ul.appendChild(first);
  // 7. 点击右侧按钮， 图片滚动一张
  var num = 0;
  // circle 控制小圆圈的播放
  var circle = 0;
  // flag 节流阀
  var flag = true;
  arrow_r.addEventListener('click', function () {
    if (flag) {
      flag = false; // 关闭节流阀
      // 如果走到了最后复制的一张图片，此时 我们的ul 要快速复原 left 改为 0
      if (num == ul.children.length - 1) {
        ul.style.left = 0;
        num = 0;
      }
      num++;
      animate(ul, -num * focusWidth, function () {
        flag = true; // 打开节流阀
      });
      // 8. 点击右侧按钮，小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放
      circle++;
      // 如果circle == 4 说明走到最后我们克隆的这张图片了 我们就复原
      if (circle == ol.children.length) {
        circle = 0;
      }
      // 调用函数
      circleChange();
    }
  });

  // 9. 左侧按钮做法
  arrow_l.addEventListener('click', function () {
    if (flag) {
      flag = false;
      if (num == 0) {
        num = ul.children.length - 1;
        ul.style.left = -num * focusWidth + 'px';
      }
      num--;
      animate(ul, -num * focusWidth, function () {
        flag = true;
      });
      // 点击左侧按钮，小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放
      circle--;
      // 如果circle < 0  说明第一张图片，则小圆圈要改为第4个小圆圈（3）
      // if (circle < 0) {
      //     circle = ol.children.length - 1;
      // }
      circle = circle < 0 ? ol.children.length - 1 : circle;
      // 调用函数
      circleChange();
    }
  });

  function circleChange() {
    // 先清除其余小圆圈的current类名
    for (var i = 0; i < ol.children.length; i++) {
      ol.children[i].className = '';
    }
    // 留下当前的小圆圈的current类名
    ol.children[circle].className = 'current';
  }

  
  // 10. 自动播放轮播图
  var timer = setInterval(function () {
    //手动调用点击事件
    arrow_r.click();
  }, 2000);
})

animate.js（注意：不同于下面的封装动画函数）

function animate(obj, target, callback) {
  // console.log(callback);  callback = function() {}  调用的时候 callback()

  // 先清除以前的定时器，只保留当前的一个定时器执行
  clearInterval(obj.timer);
  obj.timer = setInterval(function () {
    // 步长值写到定时器的里面
    // 把我们步长值改为整数 不要出现小数的问题
    // var step = Math.ceil((target - obj.offsetLeft) / 10);
    var step = (target - obj.offsetLeft) / 10;
    step = step > 0 ? Math.ceil(step) : Math.floor(step);
    if (obj.offsetLeft == target) {
      // 停止动画 本质是停止定时器
      clearInterval(obj.timer);
      // 回调函数写到定时器结束里面
      // if (callback) {
      //     // 调用函数
      //     callback();
      // }
      callback && callback();
    }
    // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
    obj.style.left = obj.offsetLeft + step + 'px';
  }, 15);
}

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./index.css">
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    a {
      text-decoration: none;
    }

    ul,
    ol,
    li {
      list-style: none;
    }
  </style>
</head>

<body>
  <div class="focus fl">
    <!-- 左侧按钮 -->
    <a href="javascript:;" class="arrow-l">
      &lt;
    </a>
    <!-- 右侧按钮 -->
    <a href="javascript:;" class="arrow-r"> &gt; </a>
    <!-- 核心的滚动区域 -->
    <ul>
      <li>
        <a href="#"><img src="img/focus.jpg" alt=""></a>
      </li>
      <li>
        <a href="#"><img src="img/focus1.jpg" alt=""></a>
      </li>
      <li>
        <a href="#"><img src="img/focus2.jpg" alt=""></a>
      </li>
      <li>
        <a href="#"><img src="img/focus3.jpg" alt=""></a>
      </li>
    </ul>
    <!-- 小圆圈 -->
    <ol class="circle">

    </ol>
  </div>
  <script src="./js/animate.js"></script>
  <script src="./js/index.js"></script>
</body>

</html>

index.css样式

@charset "uft-8";

.focus {
  position: relative;
  width: 721px;
  height: 455px;
  background-color: purple;
  overflow: hidden;
  margin: 0 auto;
}

.focus ul {
  position: absolute;
  top: 0;
  left: 0;
  width: 600%;
}

.focus ul li {
  float: left;
}

.arrow-l,
.arrow-r {
  display: none;
  position: absolute;
  top: 50%;
  margin-top: -20px;
  width: 24px;
  height: 40px;
  background: rgba(0, 0, 0, .3);
  text-align: center;
  line-height: 40px;
  color: #fff;
  font-family: 'icomoon';
  font-size: 18px;
  z-index: 2;
}

.arrow-r {
  right: 0;
}

.circle {
  position: absolute;
  bottom: 10px;
  left: 50px;
}

.circle li {
  float: left;
  width: 8px;
  height: 8px;
  /*background-color: #fff;*/
  border: 2px solid rgba(255, 255, 255, 0.5);
  margin: 0 3px;
  border-radius: 50%;
  /*鼠标经过显示小手*/
  cursor: pointer;
}

.current {
  background-color: #fff;
}

第二种方法——轮播图加动画函数（封装的动画函数较麻烦）

animation.js文件

/*
  引用狗哥封装函数注释和解析
*/

//动画：animation(ele, obj, callback)
//参数1：为需要运动的元素 ； 参数2：为元素的属性的修改，以对象的形式（注意点：透明度设置为0.5  则需要0.5 * 100）
//参数3：为回调函数，就是待动画执行完毕后，需要操作
function animation(ele, obj, callback) {

  let timerLen = 0; //定时器的执行次数
  //遍历对象obj 进行动画样式的设置!
  for (let key in obj) {
    timerLen++
    // console.log(key); //字符串的格式 key --属性 top等等
    // console.log(obj[key]); //也就是目标值 属性值  obj[key] 100
    //style就是所运动的样式
    clearInterval(ele[key]) //清除上一次的定时器

    let speed = 0; //速度
    ele[key] = setInterval(() => {

      //假如为透明属性的时候，就获取到初始的透明值，否则就是获取当前样式的属性！
      if (key === "opacity") {
        //属性值的初始设置为小于1的，为透明度的时候 值需要*100，为了方便计算！
        style = getStyle(ele, key) * 100 //拿到初始的属性值 
      } else {
        var style = parseInt(getStyle(ele, key)); //获取到非行内样式  
      }
      //速度的计算！ (目标值 - 当前样式值)/5
      speed = (obj[key] - style) / 5;

      //假如速度小于0的时候，就是代表负数，向下取整（负数）
      speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
      style = style + speed //所修改的样式 = 当前样式 + 速度

      // console.log(style, obj[key]); //50 100
      if (key === "opacity") { //由于透明属性没有那个单位，因此需要判断！
        ele.style[key] = style / 100 //修改ele元素的样式
      } else {
        ele.style[key] = style + "px" //修改ele元素的样式
      }

      if (style === obj[key]) { //当left等于目标值的之后，就清除定时器！
        clearInterval(ele[key])
        timerLen-- //执行完定时器后，就定时器计数渐渐 当定时器计数器为0的时候，代表动画执行结束
        if (timerLen === 0) {
          // console.log("动画执行完毕了");
          callback()
        }
      }
    }, 30)
  }
}


//封装一个获取非行内样式的函数  --- getStyle(box, 'height')
//参数1：为需要获取的元素，参数2：为获取元素的属性（需要添加'')  返回值：为style
function getStyle(ele, attr) {
  var style;
  if (ele.currentStyle) {
    // ele.currentStyle 包含 所有css样式的对象 需要使用obj['属性']
    style = ele.currentStyle[attr]
  } else {
    style = window.getComputedStyle(ele)[attr]
  }
  return style
}

html和js代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    ul,
    li {
      list-style: none;
    }

    .box {
      width: 600px;
      height: 300px;
      border: 2px solid #ccc;
      position: relative;
      margin: auto;
      margin-top: 100px;
      overflow: hidden;
    }

    .box .imgBox {
      width: 500%;
      height: 300px;
      display: flex;
      position: absolute;
      left: -600px;
    }

    .box .imgBox li {
      width: 600px;
      height: 300px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 50px;
      font-weight: 900;
      color: #fff;
      flex-shrink: 0;
    }

    .box .pointBox {
      height: 20px;
      position: absolute;
      bottom: 30px;
      right: 20px;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      border-radius: 10px;
    }

    .box .pointBox li {
      width: 25px;
      height: 25px;
      background: rgba(0, 0, 0, .4);
      border-radius: 50%;
      cursor: pointer;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 5px;

    }

    .box .pointBox li.active {
      background: rgba(255, 255, 0, .5);
    }

    .box .leftRightTabs {
      position: absolute;
      top: 50%;
      width: 100%;
      transform: translateY(-50%);
      display: flex;
      justify-content: space-between;
    }

    .box .leftRightTabs span {
      width: 40px;
      height: 40px;
      color: #fff;
      font-size: 30px;
      cursor: pointer;
      user-select: none;
      background: rgba(0, 0, 0, .4);
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .box .leftRightTabs span:nth-child(1) {
      border-radius: 0 50% 50% 0;
    }

    .box .leftRightTabs span:nth-child(2) {
      border-radius: 50% 0 0 50%;
    }
  </style>
  <script src="./js/animation.js"></script>
</head>

<body>
  <div class="box">
    <ul class="imgBox">
      <li style="background: pink;">1</li>
      <li style="background: green;">2</li>
      <li style="background: blue;">3</li>
      <li style="background: purple;">4</li>
      <li style="background: red;">5</li>
    </ul>
    <!-- 小圆点 -->
    <ul class="pointBox"></ul>
    <!-- 左右切换 -->
    <div class="leftRightTabs">
      <span class="left">&lt;</span>
      <span class="right">&gt;</span>
    </div>
  </div>

  <script>
    /* 
      1. 获取元素
      2. 设置焦点，根据 imgBox 里面 li 的个数设置焦点
      3. 复制元素，第一个元素复制出来放在末尾，最后一只复制出来放在头
      4. 自动轮播，搞一个定时器，每隔多少时间 index++ 动一下
      5. 移入移出，移入的时候停掉 autoLoop
      6. 点击左右按钮切换
      7. 点击焦点切换
          + 要拿到点击的哪个焦点的 索引
          + 可不可以在setPoint 的时候保存一个索引在 li 身上
          + 点每一个 li 的时候拿到身上的属性就可以了            
    */

    window.onload = function () {
      // 获取imgBox元素
      let imgBox = document.querySelector('.imgBox');
      // 获取imgBox下的所有子元素
      let list = imgBox.children;

      // 获取小圆点元素的父元素
      let pointBox = document.querySelector('.pointBox');
      // 获取整个div 元素
      let box = document.querySelector('.box');
      // 获取盒子的宽度 此处为600
      let boxWidth = box.clientWidth;

      // 获取左右切换元素的父元素
      let leftRightTabs = document.querySelector('.leftRightTabs');
      // 设置一个变量为true 用于左右切换
      let loopFlag = true;

      // 渲染数据 设置焦点的（小圆点）
      setPoint(list, pointBox)

      // 克隆第一张和最后一个元素（需要在渲染完小圆点数据之后操作）
      let copyFirst = imgBox.firstElementChild.cloneNode(true);
      let copyLast = imgBox.lastElementChild.cloneNode(true);
      imgBox.appendChild(copyFirst); //把赋值出来的第一张添加在imgBox的最后面
      imgBox.insertBefore(copyLast, imgBox.firstElementChild);//把赋值出来的最后一张添加在imgBox的第一张前面

      imgBox.style.width = boxWidth * imgBox.children.length + 'px';//把装轮播图的容器的宽度变大


      // 轮播图运动起来
      let index = 1;
      // 定义一个定时器变量
      let timer;
      // 自动播放
      autoPlay()

      // 鼠标滑过时候清除定时器，停止播放
      box.addEventListener('mouseover', () => clearInterval(timer))
      // 鼠标移出的时候重新调用函数，再重新播放
      box.addEventListener('mouseout', () => autoPlay())

      // 封装一个设置小圆点的函数
      function setPoint(arr, pointBox) {
        // 排他思想，清除所有的小圆点样式
        for (let i = 0; i < arr.length; i++) {
          let li = document.createElement('li');
          // 当是第一个点的时候，给这个点设置class名为 active
          if (i === 0) {
            li.classList.add('active')
          }
          // 显示小圆点里面的内容
          li.innerHTML = i + 1;
          // 自定义属性 属性值为索引值
          li.setAttribute('point-index', i)
          // 添加到 父元素 pointBox 里面
          pointBox.appendChild(li);
        }
      }

      // 自动播放函数
      function autoPlay() {
        timer = setInterval(() => {
          index++;
          // 调用动画函数 imgbox 元素，向右运动，回调函数 moveEnd
          animation(imgBox, { left: -index * 600 }, moveEnd);
        }, 2000)
      }

      // 运动结束之后操作的事情 moveEnd函数
      function moveEnd() {
        // 当index为轮播图循环完之后的长度减1时，当index为6，重新从第二张开始
        // console.log(imgBox.children.length) // 7 
        // console.log(index) // 从2开始打印
        if (index === imgBox.children.length - 1) {
          index = 1;
          // 向右移动的距离
          imgBox.style.left = -index * boxWidth + 'px';
        }
        // 多判断一下，当index === 0
        if (index === 0) {
          index = imgBox.children.length - 2;
          imgBox.style.left = -index * boxWidth + 'px';
        };
        // 判断小圆点的样式，清除所有的样式
        for (let i = 0; i < pointBox.children.length; i++) {
          pointBox.children[i].classList.remove('active');
        };
        // 给当前的小圆点添加样式
        pointBox.children[index - 1].classList.add('active');
        // 让loopflag改为true
        loopFlag = true;
      }

      // 点击左右按钮的时候，切换轮播图
      // 委托给左右切换的父元素绑定事件
      leftRightTabs.addEventListener('click', e => {
        // 判断点击事件，如果为false，结束点击事件，防止开启多个动画，也就是开启多个定时器
        if (loopFlag === false) {
          return
        };
        // 如果不是false，先改变这个值为false
        loopFlag = false;
        if (e.target.className === 'left') {
          index--;
          // console.log(index) //打印 1 0 4 3 2
          animation(imgBox, { left: -index * 600 }, moveEnd);
        } else if (e.target.className === 'right') {
          index++;
          // console.log(index) //打印 6 2 3 4 5
          animation(imgBox, { left: -index * 600 }, moveEnd);
        }
      })

      // 点击小圆点的时候也可以切换图片
      // 委托给小圆点的父元素绑定事件 
      pointBox.addEventListener('click', e => {
        // 判断点击事件，如果为false，结束点击事件，防止开启多个动画，也就是开启多个定时器
        if (loopFlag === false) {
          return
        };
        // 如果不是false，先改变这个值为false
        loopFlag = false;
        // 判断选中是否为li
        if (e.target.tagName === 'LI') {
          // console.log(e.target.getAttribute('point-index')) //打印的是字符串 需要转为数值型 - 0
          index = e.target.getAttribute('point-index') - 0 + 1
          // console.log(index) //打印 1 2 3 4 5
          animation(imgBox, { left: -index * boxWidth }, moveEnd)
        }
      })
    }
  </script>
</body>

</html>

第三种方法——面向对象的轮播图加动画函数

如果没有小圆圈的情况（注意为了方便 这里先引用jQuery的动画函数）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>面向对象之轮播图</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #container {
      border: 2px solid #ddd;
      border-radius: 10px;
      width: 1380px;
      height: 350px;
      margin: 50px auto;
      position: relative;
      overflow: hidden;
    }

    #prev_btn,
    #next_btn {
      width: 60px;
      height: 60px;
      background: rgba(39, 39, 39, .7);
      display: inline-block;
      border-radius: 50%;
      line-height: 60px;
      text-align: center;
      font-size: 30px;
      color: #fff;
      position: absolute;
      top: 143px;
      left: 15px;
      z-index: 999;
      cursor: pointer;
      display: none;
    }

    #next_btn {
      position: absolute;
      top: 143px;
      left: 1315px;
    }

    /* #prev_btn img {
      margin: 7px 5px 0 0;
      width: 45px;
      height: 45px;
    }

    #next_btn img {
      margin: 7px 0 0 5px;
      width: 45px;
      height: 45px;
    } */

    /* #banner_container {
      width: 600%;
    } */

    #banner_container {
      position: absolute;
      /* transition: all .5s; */
      /* width: 8280; */
      width: 10660px;
    }

    #banner_container li {
      list-style: none;
      float: left;
      width: 1380px;
      height: 350px;
    }

    #banner_container li img {
      width: 1380px;
      height: 350px;
    }
  </style>
</head>

<body>
  <div id="container">
    <!-- <a id="prev_btn"><img src="img/zuo-copy.png" /></a>
    <a id="next_btn"><img src="img/you-copy.png" /></a> -->
    <a id="prev_btn">&lt;</a>
    <a id="next_btn">&gt;</a>
    <ul id="banner_container">
      <li><img src="https://img.zcool.cn/community/01f1515ca2ca6da801214168c2ae09.jpg@1380w" alt=""></li>
      <li><img src="https://img.zcool.cn/community/0138ec5ca44892a801208f8be4c0ea.jpg@1380w" alt=""></li>
      <li><img src="https://img.zcool.cn/community/01b73c5ca2ca82a801214168fa83fa.jpg@1380w" alt=""></li>
      <li><img src="https://img.zcool.cn/community/01037e5ca2ca93a801208f8b8d457d.jpg@1380w" alt=""></li>
      <li><img src="https://img.zcool.cn/community/01da355ca419dfa8012141682afdd2.jpg@1380w" alt=""></li>
      <li><img src="https://img.zcool.cn/community/01f1515ca2ca6da801214168c2ae09.jpg@1380w" alt=""></li>
    </ul>
  </div>

  <!-- 引用jQuery中的动画函数 -->
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>

    // 实现功能
    // 1、自动播放
    // 2、鼠标移入和移出 显示和隐藏 点击按钮
    // 3、点击左右的按钮实现左右切换效果

    function Banner() {
      this.container = document.querySelector("#container");
      this.prev_btn = document.querySelector("#prev_btn");
      this.next_btn = document.querySelector("#next_btn");
      this.slide_container = document.querySelector("#banner_container");
      this.slides = document.querySelectorAll("#banner_container li");
      // 定义一个索引号
      this.index = 0;

      // 调用绑定事件函数
      this.bindEvent();
      // 1、自动播放
      this.autoPlay()
    }

    Banner.prototype.bindEvent = function () {
      var self = this;
      // 定义一个变量存放最大的索引值
      var max_index = self.slides.length - 1
      // 绑定事件 给左边按钮
      self.prev_btn.onclick = function () {
        // 判断如果index为0 说明为第一张，此刻让left值为: 最大索引号*1380，让所有的li平移到左边
        if (self.index === 0) {
          // 让左边的left等于最大长度的left值
          self.slide_container.style.left = -1380 * max_index + "px";
          // 这里需要减一，要同时进行()
          self.index = max_index - 1
          // console.log(self.index)
        } else {
          // 如果if不成立,则让索引号减一
          self.index--;
        }
        // 动画方法调用
        self.changeSlide();
      }

      // 绑定事件 给右边按钮
      self.next_btn.onclick = function () {
        // 判断如果index为最大索引值， 说明为最后一张，此刻让left值为: 0*1380，让所有的li平移到右边
        if (self.index === max_index) {
          // 让第一个重现回来.实现循环效果，让left值为: 0*1380
          self.slide_container.style.left = 0;
          // 再让索引值为1 忽略第一个,因为第一个已经存在
          self.index = 1;
        } else {
          // 如果if不成立,则让索引号加一
          self.index++;
        }
        // 动画方法的调用
        self.changeSlide();
      }
    }

    // 动画效果函数
    Banner.prototype.changeSlide = function () {
      // 调用jQuery里面的动画函数方法
      $(this.slide_container)
        // 是避免重复点击.关闭上一个动画.然后再重新开始
        .stop()
        .animate({
          left: -this.index * 1380
        }, 1000)
    }

    // 自动轮播效果
    Banner.prototype.autoPlay = function () {
      var self = this
      var timer = setInterval(function () {
        self.next_btn.onclick()
      }, 3000)

      // 当鼠标进入container时，显示按钮 关闭定时器
      self.container.onmouseover = function () {
        // console.log(1)
        self.prev_btn.style.display = "block"
        self.next_btn.style.display = "block"
        clearInterval(timer)
      }

      // 当鼠标离开container时，隐藏按钮 打开定时器 注意打开之前先关闭之前的定时器
      self.container.onmouseout = function () {
        // console.log(2)
        self.prev_btn.style.display = "none"
        self.next_btn.style.display = "none"
        // 先清除之前定时器
        clearInterval(timer)
        // 再开启定时器
        timer = setInterval(function () {
          self.next_btn.onclick()
        }, 3000)
      }

    }

    var ban = new Banner();

  </script>

</body>

</html>

如果有小圆圈的情况（注意为了方便 这里先引用jQuery的动画函数）

/*
  说明：引用狗哥的代码和注释
*/

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    li,
    ul {
      list-style: none;
    }

    #container {
      /* border: 2px solid #ddd; */
      border-radius: 10px;
      width: 1380px;
      height: 350px;
      margin: 50px auto;
      position: relative;
      overflow: hidden;
    }

    #prev_btn,
    #next_btn {
      width: 60px;
      height: 60px;
      background: rgba(39, 39, 39, .7);
      display: inline-block;
      border-radius: 50%;
      line-height: 60px;
      text-align: center;
      font-size: 30px;
      color: #fff;
      position: absolute;
      top: 143px;
      left: 15px;
      z-index: 999;
      cursor: pointer;
    }

    #next_btn {
      position: absolute;
      top: 143px;
      left: 1315px;
    }

    /* #banner_container{
        width: 600%;
    } */

    #banner_container {
      position: absolute;
      /* transition: all .5s; */
      width: 8280px;
      /* width: 600%; */
    }

    #banner_container li {
      list-style: none;
      float: left;
      width: 1380px;
      height: 350px;
    }

    #banner_container li img {
      width: 1380px;
      height: 350px;
    }

    .circle_box {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto auto 20px;
      width: 140px;
      height: 20px;
      /* background: rgba(0, 0, 0, .7); */
      z-index: 111;
    }

    .circle_box li {
      margin-right: 10px;
      float: left;
      width: 20px;
      height: 20px;
      background: blue;
      border-radius: 50%;
    }

    .circle_box li:last-child {
      margin-right: 0;
    }

    .circle_box .active {
      background: yellow;
    }
  </style>
</head>

<body>
  <div id="container">
    <!-- <a id="prev_btn"><img src="./images/zuo-copy.png" /></a>
    <a id="next_btn"><img src="./images/you-copy.png" /></a> -->
    <a id="prev_btn">&lt;</a>
    <a id="next_btn">&gt;</a>
    <ul id="banner_container">
      <li><img src="https://img.zcool.cn/community/01f1515ca2ca6da801214168c2ae09.jpg@1380w" alt=""></li>
      <li><img src="https://img.zcool.cn/community/0138ec5ca44892a801208f8be4c0ea.jpg@1380w" alt=""></li>
      <li><img src="https://img.zcool.cn/community/01b73c5ca2ca82a801214168fa83fa.jpg@1380w" alt=""></li>
      <li><img src="https://img.zcool.cn/community/01037e5ca2ca93a801208f8b8d457d.jpg@1380w" alt=""></li>
      <li><img src="https://img.zcool.cn/community/01da355ca419dfa8012141682afdd2.jpg@1380w" alt=""></li>
      <li><img src="https://img.zcool.cn/community/01f1515ca2ca6da801214168c2ae09.jpg@1380w" alt=""></li>
    </ul>
    <ol class="circle_box">
      <li class="active"></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </div>

  <!-- 调用jQuery库 这里方便用动画函数 -->
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <script>
    //1：数据 01：左右按钮 03：轮播图的容器 04：每一个小li 05：当前索引
    //2：功能：
    //   2-01：点击左箭头，使用轮播图的滚动
    //   2-02：点击左箭头，使用轮播图的滚动
    //   2-03：轮播图的自动播放滚动
    //   2-04：
    //3：切换功能 就是拿到当前的index * 移动的宽！
    //4：自动播放功能 
    //   4-01：自动播放，定时器的形式
    //   4-02：鼠标滑过 外围大盒子，自动播放停止 
    //   4-03：鼠标滑过，自动播放开始
    //5：小圆圈
    //   5-01：小圆圈跟随自动播放的显示高亮 （点击的时候，添加高亮）

    function Banner() {
      this.prev_btn = document.querySelector("#prev_btn") //左按钮
      this.next_btn = document.querySelector("#next_btn") //右按钮
      this.banner_container = document.querySelector("#banner_container") //轮播图（移动的也就是这个）
      this.focus = document.querySelector("#container") //轮播图最外围的容器
      this.lis = document.querySelectorAll("#banner_container li") //所有小li
      this.circleLis = document.querySelectorAll(".circle_box li") //所有小圆圈
      this.index = 0;
      this.focusW = this.focus.offsetWidth //轮播图的移动宽度
      this.lisLength = this.lis.length //lis的长度
      this.circleIdx = 0; //小圆圈的索引

      //调用事件绑定
      this.bindEvent()
      //调用自动播放
      this.autoplay()
    }

    //2：事件绑定函数
    Banner.prototype.bindEvent = function () {
      var self = this

      //2-01：右箭头点击事件 
      var max_index = self.lis.length - 1 //最大值 --- 也就是最后一张的索引！
      self.next_btn.onclick = function () {
        //02：当点击滚动到最后一张的时候，先立即跳转到第一位置，也就是left为0！  否则的话，就++
        if (self.index === max_index) {
          self.banner_container.style.left = 0;
          self.index = 1;
        } else {
          //01：点击之后，索引++
          self.index++
        }
        //计算小圆圈的索引
        if (self.index === max_index) {
          self.circleIdx = 0
        } else {
          self.circleIdx++
        }
        self.changeEvent() //切换轮播图
        self.heightLight() //切换小圆圈
      }

      //2-02：左箭头点击事件 
      self.prev_btn.onclick = function () {
        //02：当点击--到0的时候，立即先跳转到最后一张，也就是left为最大值！否则的话：索引--
        if (self.index === 0) {
          banner_container.style.left = -max_index * self.focusW + "px"
          self.index = max_index - 1;
        } else {
          //01：点击的时候，索引--
          self.index--
        }
        //假如那个轮播图的索引号为max_index - 1的时候，就是代表为最后一张了，于是设置它的索引号！
        if (self.index === max_index - 1) {
          self.circleIdx = max_index - 1
        } else {
          self.circleIdx--
        }
        self.changeEvent()
        self.heightLight()
      }
    }

    //3：切换功能
    Banner.prototype.changeEvent = function () {
      let self = this
      // 调用jQuery中的动画函数
      $(self.banner_container).stop().animate({
        left: -self.index * self.focusW
      })
    }

    //4：自动播放功能
    Banner.prototype.autoplay = function () {
      var self = this
      var timer = setInterval(function () {
        self.next_btn.onclick()
      }, 3000)
      //04-2：鼠标滑过
      self.focus.onmouseover = function () {
        clearInterval(timer)
      }
      //04-3：鼠标离开
      self.focus.onmouseout = function () {
        clearInterval(timer) //没开启定时器前，先清除上一个定时器！
        timer = setInterval(function () {
          self.next_btn.onclick()
        }, 3000)
      }
    }

    //功能5：小圆圈的高亮切换功能
    Banner.prototype.heightLight = function () {
      var self = this
      //排他思想
      for (var i = 0; i < self.circleLis.length; i++) {
        self.circleLis[i].className = ""
      }
      // console.log(self.circleIdx);
      self.circleLis[self.circleIdx].className = "active"
    }

    new Banner()
  </script>
</body>

</html>

有些数据可能触及其他网站的数据，但是仅作为自用！！！

本文地址：https://blog.csdn.net/weixin_42681295/article/details/107300363