Web中的广告组件(幻灯片组件)实现
2011-12-29 08:51 AndrewCja 阅读(1297) 评论(0) 编辑 收藏 举报幻灯片是页面设计中最常见不过的组件,但要从无到有实现一个优秀的幻灯片组件并不是一件容易的事情。本文介绍了本人编写的幻灯片组件,并提供源码供下载。您可以直接使用,但希望您能保留代码中的作者注释。
本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;
});
}
};
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设置淡入淡出效果。
andycja