欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用 JavaScript 創(chuàng)建可維護(hù)的幻燈片效果代碼第3/3頁(yè)

 更新時(shí)間:2008年06月22日 21:59:06   作者:  
顯然,效果很實(shí)用。對(duì)于這個(gè)效果,我們并不解釋如何去使用效果庫(kù),而是講解如何創(chuàng)建類似的效果,并保持他的可用性,分離式(unobtrusive),可維護(hù)性(讓未來的維護(hù)者,在不需要修改你的腳本的情況下,修改圖片,外觀或文本標(biāo)簽)。

下一步要做的是,分離外觀的 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)文章

最新評(píng)論