当前位置: 移动技术网 > IT编程>开发语言>JavaScript > 独立出来的几种轮播图写法

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

2020年07月14日  | 移动技术网IT编程  | 我要评论

轮播图的几种写法

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

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);
}

<!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

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
移动技术网