轮播图的案例

轮播图

轮播图的基本构成以及js的步骤分解

1. 把html与css写出来
2. 点击右箭头，切换到下一张图片。
3. 点击左箭头，切换到上一张图片。
4. 无缝轮播：克隆第一张图片到最后去，当图片播放到最后一张时，如果点击右箭头，瞬间回到第一张，然后从第一张再开始轮播。
5. 小圆点：点击右箭头，小圆点应该跟着变化。第n张图片显示时，第n个小圆点应该有一个active类名。 排他思想：先将其他的active都清除掉，再给自身添加active类名。
6. 小圆点的点击事件：点击第n个小圆点，应该显示第n个图片。
7. 自动播放 定时器，每隔一段时间执行一下右箭头的点击事件。
8. 鼠标移入时，清除定时器 鼠标移出时，再开始定时器。

下面开始上代码

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    .win {
      width: 1200px;
      height: 675px;
      margin: 0 auto;
      position: relative;
      margin-top: 100px;
      overflow: hidden;
    }

    ul {
      position: absolute;
      height: 100%;
    }

    .win ul li {
      float: left;
      width: 1200px;
      height: 100%;
    }

    .win li img {
      width: 100%;
      height: 100%;
    }

    .slide {
      position: absolute;
      width: 50px;
      height: 60px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 40px;
      background-color: rgba(0, 0, 0, .4);
      text-align: center;
      line-height: 60px;
      color: #fff;
    }

    .slide-l {
      left: 0px;
    }

    .slide-r {
      right: 0px;
    }
    .circle-div{
      position: absolute;
      width: auto;
      left: 50%;
      bottom: 20px;
      transform: translate(-50%);
    }
    .circle-div span{
      width: 14px;
      height: 14px;
      border-radius: 50%;
      display: inline-block;
      border: 1px solid;
      margin: 0 10px;
      cursor: pointer;
    }
    .active{
      background-color: #ccc;
    }
  </style>

<div class="win">
    <ul class="slide-show">
      <li><img src="img/b2.jpg" alt=""></li>
      <li><img src="img/b3.jpg" alt=""></li>
      <li><img src="img/b4.jpg" alt=""></li>
      <li><img src="img/b5.jpg" alt=""></li>
    </ul>
    <!-- 左右箭头 -->
    <span class="slide-l slide">＜</span>
    <span class="slide-r slide">＞</span>
    <!-- 小圆点 -->
    <div class="circle-div">
    </div>
  </div>

<script>
    // 获取左箭头
    let slideLeft = document.querySelector(".slide-l");
    // 获取右箭头
    let slideRight = document.querySelector(".slide-r");

    let slideShow = document.querySelector(".slide-show");

    // 获取页面中的轮播图的数量
    var lis = document.querySelectorAll(".slide-show li");
    var len = lis.length;

    // 小圆点的父元素
    var circleDiv = document.querySelector(".circle-div");

    // 获取窗口div
    var win = document.querySelector(".win")

    // 获取li标签的宽度
    var wid = lis[0].offsetWidth;

    // 存储当前展示的图片的下标
    var num = 0;

     // 创建小圆点
     for (let i = 0; i < len; i++) {
      var span = document.createElement("span");
      circleDiv.append(span);
    }
    circleDiv.firstElementChild.classList.add("active");
    
    // 获取所有的小圆点
    let spanList = circleDiv.querySelectorAll("span");

    slideLeft.onclick = function () {
      if(num == 0){
        num = len;
        // 瞬间回到最后一张的状态。
        slideShow.style.left = -wid * len + "px";
      }
      num--;
      bufferMove(slideShow, -wid * num);
      // 切换小圆点
      circleCut();
      
    }
    slideRight.onclick = rightClick;

    function rightClick(){
      if (num == len) {
        num = 0;
        // 瞬间回到第一张的状态。
        slideShow.style.left = "0px";
      }
      num++;
      bufferMove(slideShow, -wid * num);
      // 切换小圆点
      circleCut();
    }
   

    // 复制第一张图片到最后去。
    let cloneNode = slideShow.firstElementChild.cloneNode(true);
    slideShow.append(cloneNode);

    // 修改ul的宽度
    slideShow.style.width = (len + 1)*wid+"px"; 

    function circleCut(){
      for (let i = 0; i < spanList.length; i++) {
         spanList[i].classList.remove("active");
      }
      // 跳转到第n张 图片时，第n个小圆点应该添加一个active类名。其他的小圆点清除active类。
      if (num == len) {
        // 最后一张图片时，是复制的，小圆点应该是第一个。
        spanList[0].classList.add("active");
      }else{
        spanList[num].classList.add("active");
      }
    }

    // 小圆点的点击事件
    for (let i = 0; i < spanList.length; i++) {
       spanList[i].onclick = function(){
         num = i;
        // 将图片切换到第i张
        bufferMove(slideShow, -wid * num);
        circleCut();
       }
    }
    // 自动播放
    var timer = setInterval(rightClick,1000);
    // 鼠标移入窗口时，停止定时器
    win.onmouseover = function(){
      clearInterval(timer);
    }
    // 鼠标移出，开始定时器
    win.onmouseout = function(){
      timer = setInterval(rightClick,1000);
    }
      /**
   * 
   * @param {*} box 运动对象
   * @param {*} target 目标位置
   * @param {*} attr 运动方向
   */
  // 创建一个匿名函数用来调用
  function bufferMove(box, target, attr = "left") {
    clearInterval(box.times);
    box.times = setInterval(function () {
      var attrValue = parseInt(getComputedStyle(box)[attr]);
      // 获取盒子到目标位置的距离
      var distance = target - attrValue;
      // 盒子的速度随着位置而改变
      var speed = distance / 8;
      // 为了解决计算机不能执行小于1px的位置(进行取整)
      speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
      var num = attrValue + speed;
      // 运动的结束判断： 往右移动，盒子位置大于等于目标值时结束   往左移动，盒子位置小于等于目标值结束
      if ((speed > 0 && num >= target) || (speed < 0 && num <= target)) {
        // 运动停止： 停止定时器
        clearInterval(box.times);
        box.style[attr] = target + "px";
      } else {
        box.style[attr] = num + "px";
      }
    }, 20)
  }
  </script>

效果图

轮播图插件 （swiper）

点击进入插件官网

百度下载该插件，可以根据官网上的使用手册