JavaScript學習路-(19)SliderShow

今天練習做一個貓咪 SliderShow,
這次的 SliderShow 是按了 next 鍵,圖片就跳到下一張,按 Prev 就回到上一張。
以下記錄做法。
Demo 網址請按我

首先在 html 放進圖片跟按鈕

接著加上 CSS

建立索引變數 index:

建立抓取圖片數量的變數 imgs:

頁面讀完執行函式,
上一頁按鈕按下去 –> 觸發上一頁的函式、
下一頁按鈕按下去 –> 觸發下一頁的函式:

上一張以及下一張圖片的函式,算出 index 的數字後執行 display() :
index = 0 + 5 – 1 –> 4 % 5 –> 4,
index = 4 + 5 – 1 –> 8 % 5 –> 3,
index = 3 + 5 – 1 –> 7 % 5 –> 2,
index = 2 + 5 – 1 –> 6 % 5 –> 1,
index = 1 + 5 – 1 –> 5 % 5 –> 0

index = 0 + 1 –> 1 % 5 –> 1,
index = 1 + 1 –> 2 % 5 –> 2,
index = 2 + 1 –> 3 % 5 –> 3,
index = 3 + 1 –> 4 % 5 –> 4,
index = 4 + 1 –> 5 % 5 –> 0

建立讓圖片顯示 / 隱藏的函式:
先建立一個 for 迴圈,當 i 小於 imgs 總數量(Demo 為 5)的時候, i 遞增,
並在 imgs 設定 .hidden 這個 class name 。
因陣列的第一個是 0 之故所以 i 初始值是 0 。
index 等於 index 模除 imgs.length (上面有寫運算方式)
imgs的索引設定 .visible 。

參考資料:
how do i add a class to a given element
& 我家程式自耕農 C瓜

本文同步發表於 http://ithelp.ithome.com.tw/ironman7/app/article/dev/recent/10158666

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。