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

首先在 html 放進圖片跟按鈕

<div id="gallery">
<img src="http://lorempixel.com/output/cats-q-c-640-480-1.jpg" alt="">
<img src="http://lorempixel.com/output/cats-q-c-640-480-2.jpg" alt="">
<img src="http://lorempixel.com/output/cats-q-c-640-480-3.jpg" alt="">
<img src="http://lorempixel.com/output/cats-q-c-640-480-4.jpg" alt="">
<img src="http://lorempixel.com/output/cats-q-c-640-480-5.jpg" alt="">
</div>
<input type="button" id="btn-prev" value="prev">
<input type="button" id="btn-next" value="next">

接著加上 CSS

/* 圖片顯示 */
.visible { display: block; }
/* 圖片隱藏 */
.hidden { display: none; }
/* 圖片的盒子設定 */
#gallery { margin: 10px auto; position: relative; height: 480px; width: 640px; }
/* 圖片通通定位到同一地方 */
#gallery img { position: absolute; left: 0; top: 0;}

建立索引變數 index：

var index = 0;

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

var imgs = document.getElementsByTagName('img');

頁面讀完執行函式，
上一頁按鈕按下去 --> 觸發上一頁的函式、
下一頁按鈕按下去 --> 觸發下一頁的函式：

window.onload = function () {
document.getElementById('btn-next').onclick = function(evt) {
changeNextImg();
}
document.getElementById('btn-prev').onclick = function(evt) {
changePrevImg();
}
}

上一張以及下一張圖片的函式，算出 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

function changePrevImg() {
index = index + imgs.length - 1;
display();
}

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

function changeNextImg() {
index = index + 1;
display();
}

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

function display() {
for (var i = 0; i < imgs.length; i++) {
imgs[i].className = " hidden";
};
index = index%imgs.length;
imgs[index].className = 'visible';
}

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

本文同步發表於 http://azzurro.blog.aznc.cc/learn_javascript_19/