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(本站文章:)那么强大,但我觉得够你的网站项目使用就足够了。
零七网部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与零七网进行文章共享合作。