Web中的广告组件（幻灯片组件）实现

幻灯片组件下载

幻灯片是页面设计中最常见不过的组件，但要从无到有实现一个优秀的幻灯片组件并不是一件容易的事情。本文介绍了本人编写的幻灯片组件，并提供源码供下载。您可以直接使用，但希望您能保留代码中的作者注释。

本tip组件具有以下特性：

1、兼容各主流浏览器。
2、良好的行为和接口抽象。
3、良好的代码实现。
4、可扩展性：具有简单替换和淡入淡出两种切换效果。另外，您可以方便地定制自己想要的切换效果。
5、幻灯片和轮询按钮样式与轮询逻辑分离，可以在不影响轮询逻辑的情况下修改展现样式。

下面的代码实现简单替换和淡入淡出两种切换效果，您可以扩展代码定制自己想要的效果。

    showSlide = function(index){
        if (mode == "default"){
            $slideCtns.removeClass("current");
            $($slideCtns[index]).addClass("current");
            $slideCtrls.removeClass("current");
            $($slideCtrls[index]).addClass("current")
            currentSlide = index;
        }
        else if (mode == "fade"){
            var $h = $($slideCtns[currentSlide]);
            var $s = $($slideCtns[index]);
            $slideCtns.stop();
            $h.fadeTo(200, 0.9, function(){
                $h.hide();
                $s.css("opacity", 0.8).show().fadeTo(200, 1);
                
                $slideCtrls.removeClass("current");
                $($slideCtrls[index]).addClass("current");
                
                currentSlide = index;
            });
        }
    };

本组件的展示效果如下图所示：

最后给出modSlide接口的参数说明如下：
ctnsId：幻灯片列表Id。
ctrlsId：轮询按钮列表Id。
interval：幻灯片切换间隔（单位：毫秒）。
mode：值default设置简单替换效果，值fade设置淡入淡出效果。