|
第二步：規(guī)劃腳本（Planning the Script）
一旦你已經評估了問題，并挑選出你想使用的解決方法，你便可以開始規(guī)劃腳本。本質上，我們的腳本應該做這些：
- 檢查幻燈片列表是否存在，并且包含一些圖片（有理由為一張圖片創(chuàng)建一個幻燈片效果嗎？）。
- 隱藏所有的照片，但不是第一個。
- 創(chuàng)建向前和向后的鏈接，和一個顯示我們在哪的指示器。
- 添加事件處理程序，使鏈接增加或減少當前顯示的圖片編號。
- 確保幻燈片效果沒有超出范圍，當圖片編號小于 0 ，他應該變?yōu)樽詈笠粡垐D片，反過來類似。
不同的功能處理
我們有一些方法處理這個問題。其中之一是使用 DOM 遍歷每個 LI 條目并隱藏他。在這個事件監(jiān)聽函數(shù)，我們先隱藏先前顯示的 LI （如果有的話），并顯示當前的這個。
注：顯示和隱藏代替圖片的 LI 更有意義，因為他允許維護者在每個幻燈片上添加其他的元素，比如，一些標題。
這個方法的問題在于，我們在 JavaScript 中做必要的樣式改變，這意味著如果有需要比剛才我們腳本中改變 display 從 block 到 none 更復雜的樣式改變，將使腳本變得更雜亂（沒有從行為中分離表現(xiàn)）。
樣式留給 CSS 解析器
更簡潔的方法是將所有的外觀改變（在所有列表項下載完之后隱藏某些）都留給瀏覽器的 CSS 解析器。在我們的例子中，我們可以在幻燈片中使用一個 CSS 規(guī)則很容易地隱藏所有的列表項，并用一個特定的 class 重寫當前條目的樣式。
HTML：
<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>
CSS：
#slideshow li{
display:none;
}
#slideshow li.current{
display:block;
}
唯一的問題是，如果我們使 CSS 和 JavaScript 不可用，訪客將永遠不能訪問到其他圖片。因此，我們需要僅當 JavaScript 可用時，應用這些樣式。技巧是，當 JavaScript 可用，在幻燈片的 UL 上應用 class ，例如名為 js 。這允許我們僅當 JavaScript 可用時，顯示效果，通過在 CSS 中簡單的修改：
CSS：
#slideshow.js li{
display:none;
}
#slideshow.js li.current{
display:block;
}
這個 class 的鉤子（hook）也能被用來對幻燈片的靜態(tài)和動態(tài)版本提供一個完全不同的外觀。
我們所有的腳本需要做的是，通過移除或添加 current 的 class 來顯示和隱藏當前及以前的照片。
為了確保我們的腳本將不會影響同一頁面上的其他腳本，我們將創(chuàng)建一個主要的對象，并在其上構造所有的方法和屬性。這可以確保我們的 init() 函數(shù)將不會被覆蓋或覆蓋其他任何相同名字的函數(shù)。
JavaScript:：
slideshow = {
current:0, // 當前幻燈片編碼
init:function(){
// 初始化和設置事件處理函數(shù)
},
show:function(e){
// 事件監(jiān)聽器
}
}
出處：藍色理想
責任編輯：bluehearts
上一頁 JavaScript創(chuàng)建可維護幻燈片效果 [1] 下一頁 JavaScript創(chuàng)建可維護幻燈片效果 [3
◎進入論壇網頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 2 頁 JavaScript創(chuàng)建可維護幻燈片效果 [2]
