slideshow.css = {
/*
这些都是幻灯片效果中使用到的 classe 和 ID。
你可以在这里修改他们中的任何一个。
务必请使用引号包围名称,用逗号结尾(除了最后一个)。
*/
showID :'slideshow',
dynamicClass :'js',
slideNavigationClass :'slidenav',
currentClass :'current'
}
文本标签(Text labels)—— 解释给终端用户
最后但不是最不重要的,让我们将文本标签放到一个单独的包含文件,再次使用 slideshow 命名空间。
slideshow-labels.js:
slideshow.labels = {
/*
这些都是幻灯片效果中使用到文本标签。
你可以在这里修改他们中的任何一个。
务必请使用引号包围名称。
最后一个结尾不用逗号。
*/
previous : '<<',
next : '>>’,
counterDivider : ‘ of ‘
}
改变的主要脚本
然后,我们需要修改主要脚本使用此信息,而不是依赖嵌入式的数据。没有太多的改变,很容易用搜索加替换就能做到。
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);
这些所有文件是确保将来维护者不用麻烦你就可以使用你的脚本工作所需要的。文件名应该很明显,是什么就是什么,并能随着时间的推移,成为一个标准的脚本:
tools.js
slideshow.js
slideshow-labels.js
slideshow-css.js
slideshow.css