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

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值(第幾個):預設從第１張開始
     （但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 :觸發圖片轉換（當前的消失、下一張出現）

  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
  • 選取當前圖片與下一張圖片，個別指定對應的淡出與淡入
  • 最後將 nextIndex　值給 currentIndex，再進行下一回，就能讓 currentIndex 依序為 ０、１、２、３、０、１……

備註：

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

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

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