iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 22
1
Modern Web

For 前端小幼苗的圖解筆記系列 第 22

[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;
        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() 每隔固定的時間點重複執行指定的 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
    • 選取當前圖片與下一張圖片,個別指定對應的淡出與淡入
    • 最後將 nextIndex 值給 currentIndex,再進行下一回,就能讓 currentIndex 依序為 0、1、2、3、0、1……

備註:

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

以上範例參考自jQuery 達人的階梯


個人 Blog: https://eudora.cc/


上一篇
[jQuery] 基礎語法起手式
下一篇
[CSS] Transform 變形 & Transition 轉場
系列文
For 前端小幼苗的圖解筆記30

尚未有邦友留言

立即登入留言