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设置淡入淡出效果。
作者： Leo_wl
出处： http://www.cnblogs.com/Leo_wl/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
版权信息