手把手教你用JS创建幻灯片特效

javascript创建可维护幻灯片效果。

幻灯片效果

显然，效果很实用。对于这个效果，我们并不解释如何去使用效果库，而是讲解如何创建类似的效果，并保持他的可用性，分离式（unobtrusive），可维护性（让未来的维护者，在不需要修改你的脚本的情况下，修改图片，外观或文本标签）。

无 javascript 状态下，用户将看到下面的效果：

添加和移除图片、改变图片的顺序以及添加标题，这些在 html 中都很容易做到。并且最后的解决并不意味着维护者需要懂任何 javascript 或者在源码中搜索在哪里修改 css 的 class, id 或者文本标签。

你有没有准备好花费一些时间去一步一步的尝试创建这个效果？

第一步：分析问题（analizing the problem）

创建一个好的脚本，第一步应该是去分析哪些是你要完成的：我们想要创建一个照片的幻灯片效果，并且我们想要保持维护的方便。

如何创建一个幻灯片效果

在一个网站上拥有幻灯片有几种方法：

1. 在文档中包含所有的图片。
   当他运行在无 javascript 状态，这是一个安全的选择。而且，当页面被载完，所有的图片也会将被载完。然而，这个方式只适用于少量的图片。
2. 在文档中包含第一张图片，并且有一个创建幻灯片功能的服务器端脚本。
   这也是相当安全的，但是对于终端用户来说，这是非常令人厌烦的——因为我不想加载整个页面，仅想得到下一张照片。但对页面展示和广告点击比较有效，这也是为什么大量的新闻站点使用这个方法。
3. 在文档中包含第一张图片，并按需加载其他图片。
   这个方法令你厌烦的是，必须依赖于 javascript ，并且要有一个维护照片列表的 javascript 数组。你还需提供一个加载指示器，用来显示用户一些正在发生的事情。

在我们的案例中，我们采取下面的图片列表，用向前和向后的按钮把他变成一个幻灯片效果，并且一个指示器告诉我们，照片总数中的哪张照片是当前显示的。

<ul id="slideshow">
    <li><img src="img/flat1.jpg" alt="hallway" /></li>
    <li><img src="img/flat2.jpg" alt="hob" /></li>
    <li><img src="img/flat3.jpg" alt="bathroom" /></li>
    <li><img src="img/flat4.jpg" alt="living room" /></li>
    <li><img src="img/flat5.jpg" alt="bedroom" /></li>
</ul>

最后的输出会看起来像例子中的幻灯片效果。

依赖关系检查

我们这里有一些元素依赖于 javascript 生成：文字指示器和向前和向下的链接。为了保持我们解决方法的可用性，我们需要确保一些事情：

1. 仅当 javascript 可用（用户信赖我们提供给他们使用的功能）时，这些元素应该出现。一个链接，不能做任何违反用户对我们的信任的事情。
2. 不论输入设备（让我们不要依赖用户是否有鼠标），交互式元素都应该可用。
3. 图片不应该被隐藏，除非使用者能再次访问他们。在技术上，仅显示第一张图片，且没有向前和向后的链接是预留退路的做法，但是为什么要用户已下载所有的图片仅只看到第一张？

|||

第二步：规划脚本（planning the script）

一旦你已经评估了问题，并挑选出你想使用的解决方法，你便可以开始规划脚本。本质上，我们的脚本应该做这些：

• 检查幻灯片列表是否存在，并且包含一些图片（有理由为一张图片创建一个幻灯片效果吗？）。
• 隐藏所有的照片，但不是第一个。
• 创建向前和向后的链接，和一个显示我们在哪的指示器。
• 添加事件处理程序，使链接增加或减少当前显示的图片编号。
• 确保幻灯片效果没有超出范围，当图片编号小于 0 ，他应该变为最后一张图片，反过来类似。

不同的功能处理

我们有一些方法处理这个问题。其中之一是使用 dom 遍历每个 li 条目并隐藏他。在这个事件监听函数，我们先隐藏先前显示的 li （如果有的话），并显示当前的这个。

注：显示和隐藏代替图片的 li 更有意义，因为他允许维护者在每个幻灯片上添加其他的元素，比如，一些标题。

这个方法的问题在于，我们在 javascript 中做必要的样式改变，这意味着如果有需要比刚才我们脚本中改变 display 从 block 到 none 更复杂的样式改变，将使脚本变得更杂乱（没有从行为中分离表现）。

样式留给 css 解析器

更简洁的方法是将所有的外观改变（在所有列表项下载完之后隐藏某些）都留给浏览器的 css 解析器。在我们的例子中，我们可以在幻灯片中使用一个 css 规则很容易地隐藏所有的列表项，并用一个特定的 class 重写当前条目的样式。

html：

<ul id="slideshow">
    <li><img src="img/flat1.jpg" alt="hallway" /></li>
    <li><img src="img/flat2.jpg" alt="hob" /></li>
    <li><img src="img/flat3.jpg" alt="bathroom" /></li>
    <li><img src="img/flat4.jpg" alt="living room" /></li>
    <li><img src="img/flat5.jpg" alt="bedroom" /></li>
</ul>

css：

#slideshow li{
    display:none;
}
#slideshow li.current{
    display:block;
}

唯一的问题是，如果我们使 css 和 javascript 不可用，访客将永远不能访问到其他图片。因此，我们需要仅当 javascript 可用时，应用这些样式。技巧是，当 javascript 可用，在幻灯片的 ul 上应用 class ，例如名为 js 。这允许我们仅当 javascript 可用时，显示效果，通过在 css 中简单的修改：

css：

#slideshow.js li{
    display:none;
}
#slideshow.js li.current{
    display:block;
}

这个 class 的钩子（hook）也能被用来对幻灯片的静态和动态版本提供一个完全不同的外观。

我们所有的脚本需要做的是，通过移除或添加 current 的 class 来显示和隐藏当前及以前的照片。

为了确保我们的脚本将不会影响同一页面上的其他脚本，我们将创建一个主要的对象，并在其上构造所有的方法和属性。这可以确保我们的 init() 函数将不会被覆盖或覆盖其他任何相同名字的函数。

javascript:：

slideshow = {
    current:0, // 当前幻灯片编码
    init:function(){
        // 初始化和设置事件处理函数
    },
    show:function(e){
        // 事件监听器
    }
}

|||

第三步、基本的工具方法（ essential tools）

现在，我们有了规划和建立我们脚本的框架。是时候思考我们需要完成这个功能的一些工具方法。在其最低要求的情况下，dom 脚本的帮助库应该包括：

• 一个注册事件处理函数的方法，我们目前将使用 john resig 的 addevent() 方法。
• 添加和移除 css 样式名的方法。
• 一个覆盖 html 元素默认行为的方法。我们不希望出现链接的目标页，而仅是执行脚本。

我们添加这些工具方法到主要的对象上，并准备开始：

javascript：

slideshow = {
    current:0, // 当前幻灯片编码
    init:function(){
        // 初始化和设置事件处理函数
    },
    show:function(e){
        // 事件监听器
    },
    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();
        }
    }
}

当文档完全载完，第一件事情就是需要执行 init() 方法：

javascript：

slideshow = {
    current:0, // 当前幻灯片编码
    init:function(){
        // 初始化和设置事件处理函数
    },
    show:function(e){
        // 事件监听器
    },
    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）

现在，在适当的位置我们有所有的方法工具，以及当窗口载完时被调用的 init() ，我们可以开始具体化此方法。

注：这仅是 init() 方法，而不是整个脚本。因为有行号，复制并粘贴脚本将会导致错误。

 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: },

1. 第2行，检测 dom 是否被支持。
2. 第3和4行，尝试检索 id 为 slideshow 的元素，如果没有被定义则不执行余下的方法。
3. 第5和6行，检索列表项及列表项的个数，并分别储存在属性 items 和 all 里。
4. 第7行，检测是否超多一个列表项，如果不超多则不执行余下的。
5. 第8行，添加 js 样式类名到列表上，从而隐藏列表项和应该不同的样式。
6. 第9行，调用 createnav()，并提供这个列表作为参数。
7. 第12行，调用 show() 用来显示预定义了 current 属性的滑动门。

createnav() 方法使用 dom 脚本创建幻灯片正常工作所需的 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: },

1. 第2和3行，刚开始创建一个 p 元素，用来包含整个幻灯片导航，并应用一个名为 slidenav 的 class。
2. 第4和5行，创建一个新的链接元素，储存在叫 prev 的属性中，设置 href 属性为 #。使链接显示为一个真正的链接且键盘可用，是有必要的。
3. 第6行，创建一个新的文本标签。
4. 第7行，将文本标签添加到链接上。
5. 第8行，添加一个事件处理函数，指向 show() 监听方法。
6. 第9行，将新的链接添加到 段落上。
7. 第10行，开始计数器，我们创建一个 span 元素，并用 count 属性储存他。
8. 第11行，创建一个新的文本节点，显示当前幻灯片在总数中的位置。我们需要给当前的属性增加 1，因为人类计数是从 1 开始而非从 0。
9. 第12行，将文本作为新的子节点，添加至 span 上 。
10. 第13行，将 span 元素 添加到段落上。
11. 第14至19行，基本上是复制 4 到 9 行，这次重新创建链接唯一不同的是文本标签，他储存在 next 属性上。
12. 第20行，将最近创建的段落插入到文档中初始的图片列表前。

这些被创建的所有标记都是必要的，最后剩下的是去定义一个当链接被点击时调用的监听方法 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. 第1行，得到作为参数 e 的当前事件对象，这是稍后调用的 cancelclick() 唯一需要。
2. 第2行，检测点击的元素是否是向下或者向前链接（this 由 addevent() 返回）。
3. 第3行，从当前显示的幻灯片上移除 current 的 class。由于现在有一个被点击的链接，这将成为可能。
4. 第4行，通过比较 this 和 next 属性，决定 current 的计数器是应该增加还是减少。
5. 第5行，修正计数器。
6. 第6到11行，确定计数器将永远不会超出范围，当你在第一幻灯片并点击了向前的链接，将设置他为最后一个，而当你在最后一个幻灯片，点击了向后的链接，将设置为第一个。
7. 第13和14行，生成一个新的计数器文本并替代旧的。
8. 第15行，通过设置名为 current 的 class，显示新的当前幻灯片。
9. 第16行，通过调用 cancelclick() 阻止链接的默认行为。

这些是脚本的所有内容。现在这个脚本可以工作，但仍不是真正可维护的。

|||

第五步：轻松维护（easing maintenance）

脚本功能齐全，分离式而且无懈可击。真正的问题是，现在并不方便维护。

脚本应用的最大的问题大概是，并不是所有的维护者都懂 javascript 和愿意在你的脚本中寻找需要修改的部分。

为了避免维护者做这些，最安全的方法就是把脚本和 css 中使用的命名和 id 从你的脚本功能中分离出来。此外，从使用的脚本中分离出文本标签也是个好点子，因为他们可能会改变。例如，当脚本使用其他语言本地化时。

工具方法的复用

第一件要做的事情就是，从主要脚本中分离出其他脚本也可以再用的工具函数。这也许是大部分 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 —— 外观

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

slideshow-css.js：

文本标签（text labels）—— 解释给终端用户

最后但不是最不重要的，让我们将文本标签放到一个单独的包含文件，再次使用 slideshow 命名空间。

slideshow-labels.js：

改变的主要脚本

然后，我们需要修改主要脚本使用此信息，而不是依赖嵌入式的数据。没有太多的改变，很容易用搜索加替换就能做到。

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

原作者：christian heilmann 　　译者：怿飞
原文：《a detailed explanation how to create a maintainable dynamic slide show in javascript》