jQuery 基本圖片輪播切換效果。


# jQuery-實例 Slideshow

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


# Basic 基本款 定時淡入淡出

>> CodePen Demo (opens new window)

# 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控制顯示)

    .slideshow img {
        display: none;
    }
    

# JS

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

    $('.slideshow').each(function(){
        ...
    })
    
  • (該單一組slideshow內)初始定義 3 個變數存放

    1. slideImgs:存所有 img
    2. slideImgsCount:所有 img 數量
    3. currentIndex:當前要展示的圖在 slideImgs中對應的index值(第幾個):預設從第1張開始
      (但JS中,取陣列內第"1"個的index值式"0"不是"1",故這裡的變數定義初始值為 0 )
    let slideImgs = $(this).find('img'),
        slideImgsCount = slideImgs.length,
        currentIndex = 0;
    })
    
  • 指定當前第N (currentIndex) 個img淡入方式顯示(fadeIn())

    slideImgs.eq(currentIndex).fadeIn();
    
  • 使用 JS 原生的 setInterval() (opens new window) 每隔固定的時間點重複執行指定的 function :觸發圖片轉換(當前的消失、下一張出現)

    setInterval(showNextSlide, 5000)
    
  • 定義圖片轉換的function:showNextSlide()

    function showNextSlide(){
        let nextIndex = (currentIndex + 1) % slideImgsCount;
        slideImgs.eq(currentIndex).fadeOut();
        slideImgs.eq(nextIndex).fadeIn();
        currentIndex = nextIndex;
    }
    
    • 新定義一個變數存取「下一張圖片的 index值」:nextIndex(行2)
    • 範例中使用了四張圖片,依序「下一張」要被輪流展示的是第2、3、4、1、2……張,對應的 index 值是 1、2、3、0、1……
    • currentIndex 初始值為 0,統一 +1 後除圖片數量(slideImgsCount)取的餘數(%),指定給nextIndex
    • 選取當前圖片與下一張圖片,個別指定對應的淡出與淡入
    • 最後將 currentIndex 更新為 currentIndex,再進行下一回,就能讓 currentIndex 依序為 0、1、2、3、0、1……

備註:

參考資料:


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