使用JavaScript创建可维护的幻灯片效果_Javascript教程(5)_H5之家

CSS 的 class 和 ID —— 外观

下一步要做的是，分离外观的 class 和 ID 到一个单独的包含文件。保证他们在 slideshow 命名空间里是安全的，因为其他脚本不太可能用到他们。也不会妨碍写一个简短的说明注释。

slideshow-css.js：

复制内容到剪贴板代码: 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);