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就显示隐藏左右按钮
  //   2.1鼠标经过显示左右按钮  用mouseenter时因为可以避免冒泡
  focus.addEventListener("mouseenter", function () {
    arrow_l.style.display = "block";
    arrow_r.style.display = "block";
    clearInterval(timer);
    timer = null; //清除定时器变量
  });
  //   2.2鼠标离开隐藏左右按钮
  focus.addEventListener("mouseleave", function () {
    arrow_l.style.display = "none";
    arrow_r.style.display = "none";
    timer = setInterval(function () {
      // 手动调用点击事件
      arrow_r.click();
    }, 2000);
  });
  //   3、动态生成小圆圈，有几张图片生成几个小圆圈
  //   3.1先获取元素（限定范围）
  var ul = focus.querySelector("ul");
  var ol = focus.querySelector(".circle");
  //   3.2利用 for循环动态生成li
  for (i = 0; i < ul.children.length; i++) {
    // 3.3创建节点li
    var li = document.createElement("li");
    // 生成小圆点的同时 自定义一个索引号属性
    li.setAttribute("index", i);
    // 3.4将li插入ol中
    ol.appendChild(li);
    li.addEventListener("click", function () {
      // 3.5 利用for循环和排他思想设置ol中小圆点点击后的样式
      //    干掉其他人
      for (i = 0; i < ol.children.length; i++) {
        ol.children[i].className = "";
      }
      //   留下我自己
      this.className = "current";
      //   拿到索引号  为了后面计算动画移动距离
      var index = this.getAttribute("index");
      //   在点击小圆点的时候把拿到的索引号给num和 circle 让大家都同步
      num = index;
      circle = index;
      //   调用动画函数
      animate(ul, -index * focusWidth);
    });
  }
  // 把ol里面的第一个小li设置类名为 current
  ol.children[0].className = "current";
  // 生成小圆点的同时，绑定注册事件
  // 无缝滚动需要深克隆ul的第一个li  放在小圆点生成的后面 也就是for循环的外面
  var first = ul.children[0].cloneNode(true);
  ul.appendChild(first);

  //   4、右侧按钮
  //   定义一个全局变量num,点击一次，自增1，让num乘以图片的宽度就是ul移动的距离
  var num = 0;
  //   再定义一个全局变量circle  每点击一次右侧按钮，自增1 小圆点跟着一起走
  var circle = 0; // circle 控制小圆圈的播放
  var flag = true; // flag 节流阀
  arrow_r.addEventListener("click", function () {
    if (flag) {
      flag = false; // 关闭节流阀
      //   因为要无缝滚动，所以多了一张图片，当图片滚动到最后一张克隆的图片时，让ul快速回到最左边，即left值为0，同时num的值也设置为0，这样 加1后 新开始滚动
      if (num == ul.children.length - 1) {
        ul.style.left = 0;
        num = 0;
      }
      num++;
      animate(ul, -num * focusWidth, function () {
        flag = true; // 打开节流阀
      });

      circle++;
      // 当点击按钮走到最后一张图片的时候，也就是隐藏的那个小圆点时，小圆点变成第一个
      if (circle == ol.children.length) {
        circle = 0;
      }
      // 干掉其他人
      for (i = 0; i < ol.children.length; i++) {
        ol.children[i].className = "";
      }
      // 保留我自己
      ol.children[circle].className = "current";
    }
  });

  //   5、左侧按钮
  arrow_l.addEventListener("click", function () {
    if (flag) {
      flag = false; // 关闭节流阀
      //   当处于第一张图片的时候 ，也就是num=0的时候，num是最后一张图片
      if (num == 0) {
        num = ul.children.length - 1;
        ul.style.left = -num * focusWidth + "px";
      }
      num--;
      animate(ul, -num * focusWidth, function () {
        flag = true; // 打开节流阀
      });

      circle--;
      // 当小于第一张图片的时候，小圆点显示最后一个
      if (circle < 0) {
        circle = ol.children.length - 1;
      }
      // 干掉其他人
      for (i = 0; i < ol.children.length; i++) {
        ol.children[i].className = "";
      }
      // 保留我自己
      ol.children[circle].className = "current";
    }
  });

  //   6、自动播放
  var timer = setInterval(function () {
    arrow_r.click();
  }, 2000);
});
js轮播图代码

推荐阅读
