JavaScript 練習 - 自動輪播

2019-12-07 PV:

Demo

JavaScript 練習 - 自動輪播 - Demo

Introduction 介紹

實作一個圖片自動輪播功能

DOM 操作圖片切換
運用 setInterval() 方法達成自動播放
可暫停播放

建立初始化函式

建立一個初始化函式，包含以下項目

取得所有圖片的容器
顯示第一張圖片
建立底部連結各張圖片索引的選擇鈕

取得圖片容器並顯示第一張圖片

slideIndex 表示目前顯示在畫面上的圖片的索引， slides 是所有圖片的容器，dots 是一個陣列，用來儲存待會要建立的選擇鈕。我們設定 slideIndex 的值為 0，並讓它當做是 slides 的索引值，所以初始狀態顯示的圖片會是在 HTML 結構裡由上到下的第 1 張。

建立一個迴圈，依照 slides 的數量建立 HTML 元素後，將新增的元素都添加到空陣列裡。最後把索引 0 的按鈕加上 active 狀態。

var slideIndex; // 儲存當下顯示圖片
var slides; //儲存所有圖片
var dots;

function initGallery() {
  slideIndex = 0;

  slides = document.getElementsByClassName("imgHolder");
  slides[slideIndex].style.opacity = 1;
  dots = [];
  dotsContainer = document.getElementById("dotsContainer");
  for (var i = 0; i < slides.length; i++) {
    var dot = document.createElement("span");
    dot.classList.add("dots");
    dot.setAttribute("onclick", "moveSlide(" + i + ")");
    dotsContainer.appendChild(dot);
    dots.push(dot);
  }
  dots[slideIndex].classList.add("active");
}
initGallery();

建立切換圖片的函式

建立一個切換圖片的函式

獲取下一張圖片的索引值

運用判斷式取得下一張圖片的索引值，並使用物件存取接下來要在 DOM 結構裡動態新增的 CSS 屬性。

如果下一張要顯示的圖片索引值大於目前顯示的圖片，而且下一張圖片索引值大於所有圖片的總長度值。也就是說，如果總長度是 5 張圖片，第 5 張圖的下一張圖，索引值將等於 0。並利用變更物件屬性的方式，將目前圖片向左移出，將下一張圖片向左移入。
如果下一張要顯示的圖片索引值小於目前要顯示的圖片，而且它的索引值小於 0 ，也就是說要切換到第一張圖片的前一張圖，這張圖的索引值就等於總長度 5 - 1。並利用變更物件屬性的方式，將目前圖片向右移出，將下一張圖片向右移入。

function moveSlide(n) {
  var moveSlideAnimClass = {
    forCurrent: "",
    forNext: ""
  };

  if (n > slideIndex) {
    //往前
    if (n >= slides.length) {
      //6.7...=0
      n = 0;
    }
    moveSlideAnimClass.forCurrent = "moveLeftCurrentSlide";
    moveSlideAnimClass.forNext = "moveLeftNextSlide";
  } else if (n < slideIndex) {
    // 上一張
    if (n < 0) {
      //如果小於第一張
      n = slides.length - 1; //n = 5-1 [0,1,2,3,4]
    }
    moveSlideAnimClass.forCurrent = "moveRightCurrentSlide";
    moveSlideAnimClass.forNext = "moveRightNextSlide";
  }
}

操作 DOM 完成切換圖片

接下來要再運用另一個判斷式，完成這個切換圖片的函式。這個判斷式的意思是：如果 n 不等於現在這張圖片的索引值，下一張圖片的索引值就是 n。並且用迴圈取得所有容器，在切換圖片的時候，先將 opacity 值設為 0 隱藏圖片，並移除按鈕的active 狀態。最後再將上一個步驟除存在物件裡的 CSS 屬性新增到目前這一張以及下一張要切換的圖片。

當我們點擊底部切換鈕的時候，將會指定按鈕的方法屬性為 moveSilder。

function initGallery() {
  for (var i = 0; i < slides.length; i++) {
    dot.setAttribute("onclick", "moveSlide(" + i + ")");
  }
}

function moveSlide(n) {
  var i, current, next;

  if (n != slideIndex) {
    next = slides[n];
    current = slides[slideIndex];
    for (i = 0; i < slides.length; i++) {
      slides[i].className = "imgHolder";
      slides[i].style.opacity = 0;
      dots[i].classList.remove("active");
    }
    current.classList.add(moveSlideAnimClass.forCurrent);
    next.classList.add(moveSlideAnimClass.forNext);
    dots[n].classList.add("active");
    slideIndex = n;
  }
}

綁定監聽事件

監聽事件會依照點擊左鍵頭或右箭頭，呼叫 moveSlide 函式，並傳入當下圖片的索引 +/- 1 當做參數

rightArrow.addEventListener("click", function plusSlides(n) {
  moveSlide(slideIndex + 1);
});

leftArrow.addEventListener("click", function plusSlides(n) {
  moveSlide(slideIndex - 1);
});

自動播放

自動播放使用 setInterval() 方法，並且再運用一次我們註冊在向右點擊的監聽事件裡面的第二個參數即可

var timer = undefined;

function setTimer() {
  timer = setInterval(function() {
    function plusSlides(n) {
      moveSlide(slideIndex + 1);
    }
    plusSlides();
  }, 5000);
}
setTimer();

中斷播放

中斷自動播放功能，是最後一個判斷式，如果現在計時器是停止的，那就呼叫定時器的函式，反之中斷定時。

playPauseBtn.addEventListener("click", function playPauseSlides() {
  var playPauseBtn = document.getElementById("playPauseBtn");
  if (timer == null) {
    setTimer();
    playPauseBtn.style.backgroundPositionY = "0px";
  } else {
    clearInterval(timer);
    timer = null;
    playPauseBtn.style.backgroundPositionY = "-33px";
  }
});