JavaScript創建可維護幻燈片效果。
幻燈片效果
顯然，效果很實用。對於這個效果，我們並不解釋如何去使用效果庫，而是講解如何創建類似的效果，並保持他的可用性，分離式（unobtrusive），可維護性（讓未來的維護者，在不需要修改你的腳本的情況下，修改圖片，外觀或文本標簽）。
無 JavaScript 狀態下，用戶將看到下面的效果：
添加和移除圖片、改變圖片的順序以及添加標題，這些在 HTML 中都很容易做到。並且最後的解決並不意味著維護者需要懂任何 JavaScript 或者在源碼中搜索在哪裡修改 CSS 的 class, id 或者文本標簽。
你有沒有准備好花費一些時間去一步一步的嘗試創建這個效果？
第一步：分析問題（Analizing the problem）
創建一個好的腳本，第一步應該是去分析哪些是你要完成的：我們想要創建一個照片的幻燈片效果，並且我們想要保持維護的方便。
如何創建一個幻燈片效果
在一個網站上擁有幻燈片有幾種方法：
- 在文檔中包含所有的圖片。
當他運行在無 JavaScript 狀態，這是一個安全的選擇。而且，當頁面被載完，所有的圖片也會將被載完。然而，這個方式只適用於少量的圖片。 - 在文檔中包含第一張圖片，並且有一個創建幻燈片功能的服務器端腳本。
這也是相當安全的，但是對於終端用戶來說，這是非常令人厭煩的——因為我不想加載整個頁面，僅想得到下一張照片。但對頁面展示和廣告點擊比較有效，這也是為什麼大量的新聞站點使用這個方法。 - 在文檔中包含第一張圖片，並按需加載其他圖片。
這個方法令你厭煩的是，必須依賴於 JavaScript ，並且要有一個維護照片列表的 JavaScript 數組。你還需提供一個加載指示器，用來顯示用戶一些正在發生的事情。
在我們的案例中，我們采取下面的圖片列表，用向前和向後的按鈕把他變成一個幻燈片效果，並且一個指示器告訴我們，照片總數中的哪張照片是當前顯示的。
<ul id="slideshow">
<li><img src="img/flat1.jpg" alt="Hallway" /></li>
<li><img src="img/flat2.jpg" alt="Hob" /></li>
<li><img src="img/flat3.jpg" alt="Bathroom" /></li>
<li><img src="img/flat4.jpg" alt="Living Room" /></li>
<li><img src="img/flat5.jpg" alt="Bedroom" /></li>
</ul>
最後的輸出會看起來像例子中的幻燈片效果。
依賴關系檢查
我們這裡有一些元素依賴於 JavaScript 生成：文字指示器和向前和向下的鏈接。為了保持我們解決方法的可用性，我們需要確保一些事情：
- 僅當 JavaScript 可用（用戶信賴我們提供給他們使用的功能）時，這些元素應該出現。一個鏈接，不能做任何違反用戶對我們的信任的事情。
- 不論輸入設備（讓我們不要依賴用戶是否有鼠標），交互式元素都應該可用。
- 圖片不應該被隱藏，除非使用者能再次訪問他們。在技術上，僅顯示第一張圖片，且沒有向前和向後的鏈接是預留退路的做法，但是為什麼要用戶已下載所有的圖片僅只看到第一張？
第二步：規劃腳本（Planning the Script）
一旦你已經評估了問題，並挑選出你想使用的解決方法，你便可以開始規劃腳本。本質上，我們的腳本應該做這些：
- 檢查幻燈片列表是否存在，並且包含一些圖片（有理由為一張圖片創建一個幻燈片效果嗎？）。
- 隱藏所有的照片，但不是第一個。
- 創建向前和向後的鏈接，和一個顯示我們在哪的指示器。
- 添加事件處理程序，使鏈接增加或減少當前顯示的圖片編號。
- 確保幻燈片效果沒有超出范圍，當圖片編號小於 0 ，他應該變為最後一張圖