Javascript创建幻灯片特效_Javascript教程(2)_H5之家 - 中国HTML5教程资源分享第一站

唯一的问题是，如果我们使 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：

第四步：脚本（The Script）

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

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