今天練習做一個貓咪 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