你的位置:首页 > 软件开发 > Java > Web中的广告组件(幻灯片组件)实现

Web中的广告组件(幻灯片组件)实现

发布时间:2011-12-30 11:00:48
幻灯片组件下载幻灯片是页面设计中最常见不过的组件,但要从无到有实现一个优秀的幻灯片组件并不是一件容易的事情。本文介绍了本人编写的幻灯片组件,并提供源码供下载。您可以直接使用,但希望您能保留代码中的作者注释。 本tip组件具有以下特性:1、兼容各主流浏览器。2、良好的行为和接口抽象。3、良好的代码实现。4、可扩展性:具有简单替换和淡入淡出两种切换效果。另外,您可以方便地定制自己想要的切换效果。5、幻 ...

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;
            });
        }
    };

本组件的展示效果如下图所示:
Web中的广告组件(幻灯片组件)实现

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

原标题:Web中的广告组件(幻灯片组件)实现

关键词:javascript,js,html,css

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。