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