|
|
創(chuàng)建一個好的腳本，第一步應該是去分析哪些是你要完成的：我們想要創(chuàng)建一個照片的幻燈片效果，并且我們想要保持維護的方便。
如何創(chuàng)建一個幻燈片效果
在一個網(wǎng)站上擁有幻燈片有幾種方法：
在文檔中包含所有的圖片。
當他運行在無 JavaScript 狀態(tài)，這是一個安全的選擇。而且，當頁面被載完，所有的圖片也會將被載完。然而，這個方式只適用于少量的圖片。
在文檔中包含第一張圖片，并且有一個創(chuàng)建幻燈片功能的服務器端腳本。
這也是相當安全的，但是對于終端用戶來說，這是非常令人厭煩的――因為我不想加載整個頁面，僅想得到下一張照片。但對頁面展示和廣告點擊比較有效，這也是為什么大量的新聞站點使用這個方法。
在文檔中包含第一張圖片，并按需加載其他圖片。
這個方法令你厭煩的是，必須依賴于 JavaScript ，并且要有一個維護照片列表的 JavaScript 數(shù)組。你還需提供一個加載指示器，用來顯示用戶一些正在發(fā)生的事情。
在我們的案例中，我們采取下面的圖片列表，用向前和向后的按鈕把他變成一個幻燈片效果，并且一個指示器告訴我們，照片總數(shù)中的哪張照片是當前顯示的。
<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 可用（用戶信賴我們提供給他們使用的功能）時，這些元素應該出現(xiàn)。一個鏈接，不能做任何違反用戶對我們的信任的事情。
不論輸入設備（讓我們不要依賴用戶是否有鼠標），交互式元素都應該可用。
圖片不應該被隱藏，除非使用者能再次訪問他們。在技術上，僅顯示第一張圖片，且沒有向前和向后的鏈接是預留退路的做法，但是為什么要用戶已下載所有的圖片僅只看到第一張？
第二步：規(guī)劃腳本（Planning the Script）
一旦你已經(jīng)評估了問題，并挑選出你想使用的解決方法，你便可以開始規(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)聽器
}
}
第三步、基本的工具方法（ Essential Tools）
現(xiàn)在，我們有了規(guī)劃和建立我們腳本的框架。是時候思考我們需要完成這個功能的一些工具方法。在其最低要求的情況下，DOM 腳本的幫助庫應該包括：
一個注冊事件處理函數(shù)的方法，我們目前將使用 John Resig 的 addEvent() 方法。
添加和移除 CSS 樣式名的方法。
一個覆蓋 HTML 元素默認行為的方法。我們不希望出現(xiàn)鏈接的目標頁，而僅是執(zhí)行腳本。
我們添加這些工具方法到主要的對象上，并準備開始：
JavaScript：
slideshow = {
current:0, // 當前幻燈片編碼
init:function(){
// 初始化和設置事件處理函數(shù)
},
show:function(e){
// 事件監(jiān)聽器
},
addEvent:function( obj, type, fn ) {
if ( obj.attachEvent ) {
obj['e'+type+fn] = fn;
obj[type+fn] = function(){
obj['e'+type+fn]( window.event );
}
obj.attachEvent('on'+type, obj[type+fn] );
} else
obj.addEventListener( type, fn, false );
},
removeClass:function(o,c){
var rep=o.className.match(' ‘+c)?' ‘+c:c;
o.className=o.className.replace(rep,”);
},
addClass:function(o,c){
var test = new RegExp(”(^|//s)”+c+”(//s|$)”).test(o.className);
if(!test){o.className+=o.className?' ‘+c:c;}
},
cancelClick:function(e){
if (window.event){
window.event.cancelBubble = true;
window.event.returnValue = false;
}
if (e && e.stopPropagation && e.preventDefault){
e.stopPropagation();
e.preventDefault();
}
}
}
當文檔完全載完，第一件事情就是需要執(zhí)行 init() 方法：
JavaScript技術：使用 JavaScript 創(chuàng)建可維護的幻燈片效果代碼第1/3頁，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。
