Choco-Slider是一个轻量级(大约7kb)，灵活的jQuery图片Slider插件。用户可以定制过渡动画效果，包括百叶窗翻动和淡入淡出效果，可以定义是否自动播放和播放间隔时间等参数。当然也是跨浏览器兼容的。
本例实现的效果：
如何使用？
1、创建XHTML
<div id="slider">
<img src="img/s1.jpg" alt="" title="标题一"/>
<img src="img/s2.jpg" alt="" title="图片标题二"/>
<img src="img/s3.jpg" alt="" title="标题三"/>
</div>
你可以给每张图片加上title属性，主要用来显示图片的标题或说明文字。当然你也可以给图片加上链接。
2、引用jQuery和CSS
<link rel="stylesheet" type="text/css" href="chocoslider.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.chocoslider.min.js"></script>
3、使用Choco-Slider
<script type="text/javascript">
$(function(){
$("#slider").chocoslider();
});
</script>
Choco-Slider提供了多个可以自定义的选项参数设置，如下：
auto:true, //设置是否自动播放幻灯片，其实只有设置为false时才会自动播放。
autoPause:true, //当鼠标滑向图片时，停止播放。
speedStrip:500, //滑动速度
effect:"random", //设置切换动画效果，有三种模式：effect1（百叶窗切换）, effect2（淡入淡出）
and random（随机）
sliderDelay:3000, //图片切换的延时时间
transparencytitle:0.8, //标题的背景透明度
chocoEnd: function(){}, //当切换完成的回调函数
controlNavigation:true //是否显示导航按钮
你还可以通过修改CSS来定制如导航按钮的外观等。它虽然没有jFlow（本站文章：jFlow：jQuery内容滑动特效插件的应用）那么强大，但我觉得够你的网站项目使用就足够了。
关于Choco-Slider的更多信息可以访问：http://chocoslider.alandawi.com.ar/index_en.html
声明：本文为原创文章，helloweba.com和作者拥有版权，如需转载，请注明来源于helloweba.com并保留原文链接，否则视为侵权。