使用 JavaScript 創(chuàng)建可維護(hù)的幻燈片效果代碼第2/3頁
更新時(shí)間：2008年06月22日 21:59:06 作者：
顯然，效果很實(shí)用。對(duì)于這個(gè)效果，我們并不解釋如何去使用效果庫，而是講解如何創(chuàng)建類似的效果，并保持他的可用性，分離式（unobtrusive），可維護(hù)性（讓未來的維護(hù)者，在不需要修改你的腳本的情況下，修改圖片，外觀或文本標(biāo)簽）。
JavaScript：
slideshow = {
current:0, // 當(dāng)前幻燈片編碼
init:function(){
// 初始化和設(shè)置事件處理函數(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();
}
}
}
slideshow.addEvent(window,'load',slideshow.init);
第四步：腳本（The Script）
現(xiàn)在，在適當(dāng)?shù)奈恢梦覀冇兴械姆椒üぞ?，以及?dāng)窗口載完時(shí)被調(diào)用的 init() ，我們可以開始具體化此方法。
注：這僅是 init() 方法，而不是整個(gè)腳本。因?yàn)橛行刑?hào)，復(fù)制并粘貼腳本將會(huì)導(dǎo)致錯(cuò)誤。
1: init:function(){
2: if(document.getElementById && document.createTextNode){
3: var list = document.getElementById(' ');
4: if(list){
5: slideshow.items = list.getElementsByTagName('li');
6: slideshow.all = slideshow.items.length;
7: if(slideshow.all > 1){
8: slideshow.addClass(list, 'js');
9: slideshow.createNav(list);
10: }
11: }
12: slideshow.show();
13: }
14: },
第2行，檢測 DOM 是否被支持。
第3和4行，嘗試檢索 ID 為 slideshow 的元素，如果沒有被定義則不執(zhí)行余下的方法。
第5和6行，檢索列表項(xiàng)及列表項(xiàng)的個(gè)數(shù)，并分別儲(chǔ)存在屬性 items 和 all 里。
第7行，檢測是否超多一個(gè)列表項(xiàng)，如果不超多則不執(zhí)行余下的。
第8行，添加 js 樣式類名到列表上，從而隱藏列表項(xiàng)和應(yīng)該不同的樣式。
第9行，調(diào)用 createNav()，并提供這個(gè)列表作為參數(shù)。
第12行，調(diào)用 show() 用來顯示預(yù)定義了 current 屬性的滑動(dòng)門。
createNav() 方法使用 DOM 腳本創(chuàng)建幻燈片正常工作所需的 HTML。
1: createNav:function(o){
2: var p = document.createElement('p');
3: slideshow.addClass(p, 'slidenav');
4: slideshow.prev = document.createElement('a');
5: slideshow.prev.setAttribute('href', '#');
6: var templabel = document.createTextNode('<<');
7: slideshow.prev.appendChild(templabel);
8: slideshow.addEvent(slideshow.prev, 'click', slideshow.show);
9: p.appendChild(slideshow.prev);
10: slideshow.count = document.createElement('span');
11: templabel = document.createTextNode( (slideshow.current+1) + ' / ' + slideshow.all);
12: slideshow.count.appendChild(templabel);
13: p.appendChild(slideshow.count);
14: slideshow.next = document.createElement('a');
15: slideshow.next.setAttribute('href', '#');
16: var templabel = document.createTextNode('>>');
17: slideshow.next.appendChild(templabel);
18: slideshow.addEvent(slideshow.next, ‘click', slideshow.show);
19: p.appendChild(slideshow.next);
20: o.parentNode.insertBefore(p, o);
21: },
第2和3行，剛開始創(chuàng)建一個(gè) P 元素，用來包含整個(gè)幻燈片導(dǎo)航，并應(yīng)用一個(gè)名為 slidenav 的 class。
第4和5行，創(chuàng)建一個(gè)新的鏈接元素，儲(chǔ)存在叫 prev 的屬性中，設(shè)置 href 屬性為 #。使鏈接顯示為一個(gè)真正的鏈接且鍵盤可用，是有必要的。
第6行，創(chuàng)建一個(gè)新的文本標(biāo)簽。
第7行，將文本標(biāo)簽添加到鏈接上。
第8行，添加一個(gè)事件處理函數(shù)，指向 show() 監(jiān)聽方法。
第9行，將新的鏈接添加到 段落上。
第10行，開始計(jì)數(shù)器，我們創(chuàng)建一個(gè) SPAN 元素，并用 count 屬性儲(chǔ)存他。
第11行，創(chuàng)建一個(gè)新的文本節(jié)點(diǎn)，顯示當(dāng)前幻燈片在總數(shù)中的位置。我們需要給當(dāng)前的屬性增加 1，因?yàn)槿祟愑?jì)數(shù)是從 1 開始而非從 0。
第12行，將文本作為新的子節(jié)點(diǎn)，添加至 SPAN 上 。
第13行，將 SPAN 元素 添加到段落上。
第14至19行，基本上是復(fù)制 4 到 9 行，這次重新創(chuàng)建鏈接唯一不同的是文本標(biāo)簽，他儲(chǔ)存在 next 屬性上。
第20行，將最近創(chuàng)建的段落插入到文檔中初始的圖片列表前。
這些被創(chuàng)建的所有標(biāo)記都是必要的，最后剩下的是去定義一個(gè)當(dāng)鏈接被點(diǎn)擊時(shí)調(diào)用的監(jiān)聽方法 show() 。
1: show:function(e){
2: if(this === slideshow.next || this === slideshow.prev){
3: slideshow.removeClass(slideshow.items[slideshow.current], ‘current');
4: var addto = (this === slideshow.next) ? 1 : -1;
5: slideshow.current = slideshow.current + addto;
6: if(slideshow.current < 0){
7: slideshow.current = (slideshow.all-1);
8: }
9: if(slideshow.current > slideshow.all-1){
10: slideshow.current = 0;
11: }
12: }
13: var templabel = document.createTextNode((slideshow.current+1) + ‘ / ‘ + slideshow.all);
14: slideshow.count.replaceChild(templabel, slideshow.count.firstChild);
15: slideshow.addClass(slideshow.items[slideshow.current], ‘current');
16: slideshow.cancelClick(e);
17: },
第1行，得到作為參數(shù) e 的當(dāng)前事件對(duì)象，這是稍后調(diào)用的 cancelClick() 唯一需要。
第2行，檢測點(diǎn)擊的元素是否是向下或者向前鏈接（this 由 addEvent() 返回）。
第3行，從當(dāng)前顯示的幻燈片上移除 current 的 class。由于現(xiàn)在有一個(gè)被點(diǎn)擊的鏈接，這將成為可能。
第4行，通過比較 this 和 next 屬性，決定 current 的計(jì)數(shù)器是應(yīng)該增加還是減少。
第5行，修正計(jì)數(shù)器。
第6到11行，確定計(jì)數(shù)器將永遠(yuǎn)不會(huì)超出范圍，當(dāng)你在第一幻燈片并點(diǎn)擊了向前的鏈接，將設(shè)置他為最后一個(gè)，而當(dāng)你在最后一個(gè)幻燈片，點(diǎn)擊了向后的鏈接，將設(shè)置為第一個(gè)。
第13和14行，生成一個(gè)新的計(jì)數(shù)器文本并替代舊的。
第15行，通過設(shè)置名為 current 的 class，顯示新的當(dāng)前幻燈片。
第16行，通過調(diào)用 cancelClick() 阻止鏈接的默認(rèn)行為。
這些是腳本的所有內(nèi)容?，F(xiàn)在這個(gè)腳本可以工作，但仍不是真正可維護(hù)的。
第五步：輕松維護(hù)（Easing Maintenance）
腳本功能齊全，分離式而且無懈可擊。真正的問題是，現(xiàn)在并不方便維護(hù)。
腳本應(yīng)用的最大的問題大概是，并不是所有的維護(hù)者都懂 JavaScript 和愿意在你的腳本中尋找需要修改的部分。
為了避免維護(hù)者做這些，最安全的方法就是把腳本和 CSS 中使用的命名和 ID 從你的腳本功能中分離出來。此外，從使用的腳本中分離出文本標(biāo)簽也是個(gè)好點(diǎn)子，因?yàn)樗麄兛赡軙?huì)改變。例如，當(dāng)腳本使用其他語言本地化時(shí)。
工具方法的復(fù)用
第一件要做的事情就是，從主要腳本中分離出其他腳本也可以再用的工具函數(shù)。這也許是大部分 JavaScript 庫的開始。
tools.js：
/* 輔助方法 */
tools = {
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();
}
}
}
CSS 的 class 和 ID —— 外觀
相關(guān)文章
JavaScript之瀏覽器對(duì)象_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
JavaScript可以獲取瀏覽器提供的很多對(duì)象，并進(jìn)行操作。下面通過本文給大家介紹JavaScript之瀏覽器對(duì)象的相關(guān)知識(shí)，一起看看吧2017-07-07
使用Bootstrap美化按鈕實(shí)例代碼(demo)
這篇文章主要介紹了使用Bootstrap美化按鈕實(shí)例代碼(demo),非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-02-02
目前一直在學(xué)習(xí)WEB前端的知識(shí)。下面貼出最近完成的一個(gè)可排序表格.2010-12-12
這篇文章主要介紹了js如何檢查一個(gè)對(duì)象是否為空，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
js設(shè)計(jì)模式之結(jié)構(gòu)型享元模式詳解
這篇文章主要為大家詳細(xì)介紹了js設(shè)計(jì)模式之結(jié)構(gòu)型享元模式的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-09-09
ES6 Iterator遍歷器原理，應(yīng)用場景及相關(guān)常用知識(shí)拓展詳解
這篇文章主要介紹了ES6 Iterator遍歷器原理，應(yīng)用場景及相關(guān)常用知識(shí)拓展,結(jié)合實(shí)例形式詳細(xì)分析了ES6 Iterator遍歷器具體原理、功能、用法、應(yīng)用場景及知識(shí)拓展,需要的朋友可以參考下2020-02-02
JS中數(shù)組實(shí)現(xiàn)代碼(倒序遍歷數(shù)組,數(shù)組連接字符串)
這篇文章主要介紹了JS中數(shù)組實(shí)現(xiàn)代碼（倒序遍歷數(shù)組，數(shù)組連接字符串）,代碼簡單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-12-12
解決layui中table異步數(shù)據(jù)請(qǐng)求不支持自定義返回?cái)?shù)據(jù)格式的問題
今天小編就為大家分享一篇解決layui中table異步數(shù)據(jù)請(qǐng)求不支持自定義返回?cái)?shù)據(jù)格式的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
js前臺(tái)分頁顯示后端JAVA數(shù)據(jù)響應(yīng)
js前臺(tái)分頁顯示使用jquery1.8.7框架，本文目的主要給那些剛?cè)胄熊浖_發(fā)，喜歡這也看看，程序需要有投入才有收獲感興趣的你可不要錯(cuò)過了哈，希望可以幫助到你2013-03-03
Javascript引用指針使用介紹，需要的朋友可以參考下2012-11-11