jQuery-實例 Slideshow

多張圖片切換的幻燈片效果

Basic 基本款 定時淡入淡出

>> CodePen Demo

HTML

<div class="slideshow">
  <img src="https://picsum.photos/900/400?random=1" alt=""/>
  <img src="https://picsum.photos/900/400?random=2" alt=""/>
  <img src="https://picsum.photos/900/400?random=3" alt=""/>
  <img src="https://picsum.photos/900/400?random=4" alt=""/>
</div>

CSS

.slideshow {
  position: relative;
  margin: auto;
  overflow: hidden;
  height: 400px;
  width: 900px;
}

.slideshow img {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: none;
}

JavaScript

$('.slideshow').each(function () {

  let slideImgs = $(this).find('img'),
          slideImgsCount = slideImgs.length,
          currentIndex = 0;

  slideImgs.eq(currentIndex).fadeIn();

  setInterval(showNextSlide, 5000);

  function showNextSlide() {
    let nextIndex = (currentIndex + 1) % slideImgsCount;
    console.log(nextIndex)
    slideImgs.eq(currentIndex).fadeOut();
    slideImgs.eq(nextIndex).fadeIn();
    currentIndex = nextIndex;
  }
})

做法解析：

HTML

• 將總共要展示的所有圖片(img xN個)包在一個容器(div)中

    <div class="slideshow">
        <img src=" ... ">
        ...
        <img src=" ... ">
    </div>

CSS

• 利用 absolute 的定位讓所有圖片重疊在一起

    .slideshow {
        position: relative;
    }
    .slideshow img {
        position: absolute;
        top: 0;
    }

• 將所有圖片預設為隱藏(用jQuery控制顯示) css .slideshow img { display: none; }

JS

• 最外層選定$(父容器).each( ... ) 可使單頁面上的多組 slideshow 都生效

    $('.slideshow').each(function(){
        ...
    })

• （該單一組slideshow內）初始定義 3 個變數存放

  1. slideImgs：存所有 img
  2. slideImgsCount：所有 img 數量

  3. currentIndex：當前要展示的圖在 slideImgs中對應的index值(第幾個):預設從第１張開始
     （但JS中，取陣列內第"1"個的index值是"0"不是"1"，故這裡的變數定義初始值為 0 )

     let slideImgs = $(this).find('img'),
        slideImgsCount = slideImgs.length,
        currentIndex = 0;
     })

• 指定當前第Ｎ (currentIndex) 個img淡入方式顯示(fadeIn())

    slideImgs.eq(currentIndex).fadeIn();

• 使用 JS 原生的 setInterval() 每隔固定的時間點重複執行指定的 function :觸發圖片轉換（當前的消失、下一張出現） js setInterval(showNextSlide, 5000)

• 定義圖片轉換的function：showNextSlide()

    function showNextSlide(){
        let nextIndex = (currentIndex + 1) % slideImgsCount;
        slideImgs.eq(currentIndex).fadeOut();
        slideImgs.eq(nextIndex).fadeIn();
        currentIndex = nextIndex;
    }

  • 新定義一個變數存取「下一張圖片的 index值」：nextIndex（行２）
  • 範例中使用了四張圖片，依序「下一張」要被輪流展示的是第２、３、４、１、２……張，對應的 index 值是 １、２、３、０、１……
  • currentIndex 初始值為 0，統一 +1 後除圖片數量（slideImgsCount）取的餘數（%），指定給nextIndex
  • 選取當前圖片與下一張圖片，個別指定對應的淡出與淡入
  • 最後將 currentIndex 更新為 nextIndex，再進行下一回，就能讓 currentIndex 依序為 ０、１、２、３、０、１……

備註：

• Lorem Picsum
  範例中使用的圖片來自 Picsum，可快速生成指定比例的圖像

⮩ 本文同步發表在第 12 屆 iT 邦幫忙鐵人賽 《For 前端小幼苗的圖解筆記》