使用 JavaScript 創(chuàng)建可維護(hù)的幻燈片效果代碼第3/3頁(yè)
下一步要做的是,分離外觀的 class 和 ID 到一個(gè)單獨(dú)的包含文件。保證他們?cè)?nbsp;slideshow 命名空間里是安全的,因?yàn)槠渌_本不太可能用到他們。也不會(huì)妨礙寫一個(gè)簡(jiǎn)短的說明注釋。
slideshow-css.js:
slideshow.css = {
/*
這些都是幻燈片效果中使用到的 classe 和 ID。
你可以在這里修改他們中的任何一個(gè)。
務(wù)必請(qǐng)使用引號(hào)包圍名稱,用逗號(hào)結(jié)尾(除了最后一個(gè))。
*/
showID :'slideshow',
dynamicClass :'js',
slideNavigationClass :'slidenav',
currentClass :'current'
}
文本標(biāo)簽(Text labels)—— 解釋給終端用戶
最后但不是最不重要的,讓我們將文本標(biāo)簽放到一個(gè)單獨(dú)的包含文件,再次使用 slideshow 命名空間。
slideshow-labels.js:
slideshow.labels = {
/*
這些都是幻燈片效果中使用到文本標(biāo)簽。
你可以在這里修改他們中的任何一個(gè)。
務(wù)必請(qǐng)使用引號(hào)包圍名稱。
最后一個(gè)結(jié)尾不用逗號(hào)。
*/
previous : '<<',
next : '>>',
counterDivider : ‘ of ‘
}
改變的主要腳本
然后,我們需要修改主要腳本使用此信息,而不是依賴嵌入式的數(shù)據(jù)。沒有太多的改變,很容易用搜索加替換就能做到。
slideshow.js:
slideshow = {
current:0,
init:function(){
if(document.getElementById && document.createTextNode){
var list =document.getElementById(slideshow.css.showID);
if(list){
slideshow.items = list.getElementsByTagName('li');
slideshow.all = slideshow.items.length;
if(slideshow.all > 1){
tools.addClass(list, slideshow.css.dynamicClass);
slideshow.createNav(list);
}
}
slideshow.show();
}
},
createNav:function(o){
var p = document.createElement('p');
tools.addClass(p, slideshow.css.slideNavigationClass);
slideshow.prev = document.createElement('a');
slideshow.prev.setAttribute('href', '#');
var templabel = document.createTextNode(slideshow.labels.previous);
slideshow.prev.appendChild(templabel);
tools.addEvent(slideshow.prev, 'click', slideshow.show);
p.appendChild(slideshow.prev);
slideshow.count = document.createElement('span');
templabel =document.createTextNode((slideshow.current+1) + slideshow.labels.counterDivider + slideshow.all);
slideshow.count.appendChild(templabel);
p.appendChild(slideshow.count);
slideshow.next = document.createElement('a');
slideshow.next.setAttribute('href', '#');
var templabel = document.createTextNode(
slideshow.labels.next);
slideshow.next.appendChild(templabel);
tools.addEvent(slideshow.next, 'click', slideshow.show);
p.appendChild(slideshow.next);
o.parentNode.insertBefore(p, o);
},
show:function(e){
if(this === slideshow.next || this === slideshow.prev){
tools.removeClass(slideshow.items[slideshow.current],
slideshow.css.currentClass);
var addto = this === slideshow.next ? 1 : -1;
slideshow.current = slideshow.current + addto;
if(slideshow.current < 0){
slideshow.current = (slideshow.all-1);
}
if(slideshow.current > slideshow.all-1){
slideshow.current = 0;
}
}
var templabel = document.createTextNode((slideshow.current+1) + slideshow.labels.counterDivider + slideshow.all);
slideshow.count.replaceChild(templabel, slideshow.count.firstChild);
tools.addClass(slideshow.items[slideshow.current], slideshow.css.currentClass);
tools.cancelClick(e);
}
}
tools.addEvent(window,'load',slideshow.init);
這些所有文件是確保將來維護(hù)者不用麻煩你就可以使用你的腳本工作所需要的。文件名應(yīng)該很明顯,是什么就是什么,并能隨著時(shí)間的推移,成為一個(gè)標(biāo)準(zhǔn)的腳本:
相關(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-02js設(shè)計(jì)模式之結(jié)構(gòu)型享元模式詳解
這篇文章主要為大家詳細(xì)介紹了js設(shè)計(jì)模式之結(jié)構(gòu)型享元模式的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-09-09ES6 Iterator遍歷器原理,應(yīng)用場(chǎng)景及相關(guān)常用知識(shí)拓展詳解
這篇文章主要介紹了ES6 Iterator遍歷器原理,應(yīng)用場(chǎng)景及相關(guān)常用知識(shí)拓展,結(jié)合實(shí)例形式詳細(xì)分析了ES6 Iterator遍歷器具體原理、功能、用法、應(yīng)用場(chǎng)景及知識(shí)拓展,需要的朋友可以參考下2020-02-02JS中數(shù)組實(shí)現(xiàn)代碼(倒序遍歷數(shù)組,數(shù)組連接字符串)
這篇文章主要介紹了JS中數(shù)組實(shí)現(xiàn)代碼(倒序遍歷數(shù)組,數(shù)組連接字符串),代碼簡(jiǎn)單易懂,非常不錯(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-08js前臺(tái)分頁(yè)顯示后端JAVA數(shù)據(jù)響應(yīng)
js前臺(tái)分頁(yè)顯示使用jquery1.8.7框架,本文目的主要給那些剛?cè)胄熊浖_發(fā),喜歡這也看看,程序需要有投入才有收獲感興趣的你可不要錯(cuò)過了哈,希望可以幫助到你2013-03-03