简单实用的图片幻灯片效果:Choco-Slider
2010-11-09 10:31
513 查看
Choco-Slider是一个轻量级(大约7kb),灵活的jQuery图片Slider插件。用户可以定制过渡动画效果,包括百叶窗翻动和淡入淡出效果,可以定义是否自动播放和播放间隔时间等参数。当然也是跨浏览器兼容的。
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015037/916e8f732bcea9224c00c2eb059e2394.jpg)
查看演示 下载源码
本例实现的效果:
如何使用?
1、创建XHTML
你可以给每张图片加上title属性,主要用来显示图片的标题或说明文字。当然你也可以给图片加上链接。
2、引用jQuery和CSS
3、使用Choco-Slider
Choco-Slider提供了多个可以自定义的选项参数设置,如下:
你还可以通过修改CSS来定制如导航按钮的外观等。它虽然没有jFlow(本站文章:jFlow:jQuery内容滑动特效插件的应用)那么强大,但我觉得够你的网站项目使用就足够了。
关于Choco-Slider的更多信息可以访问:http://chocoslider.alandawi.com.ar/index_en.html
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015037/916e8f732bcea9224c00c2eb059e2394.jpg)
查看演示 下载源码
本例实现的效果:
如何使用?
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
相关文章推荐
- jQuery简单实用的图片标题动画效果插件
- 简单实用的自动图片动态切换(无渐变效果)
- 简单实用的JS【横向滚动图片】效果,带控制按钮
- 用Flash制作简单实用的图片切换效果
- 简单实用的图片边框效果
- 简单的JS幻灯片效果(播放图片) and Tab卡显示、展开、隐藏效果
- 分享超简单实用的用JS实现DIV、图片圆角效果,关键是很兼容
- 简单实用的无图片随意变色css圆角效果!
- 实用图片滑块,传送带,幻灯片效果【附源码】
- 简单实用的图片放大效果
- 18款 非常实用 jquery幻灯片图片切换
- 18款jquery幻灯片图片切换 非常实用
- 可嵌入php程序的一款简单实用的jquery图片裁切自由缩放插件,croppic
- [测试文章]简单实用的鼠标滑过图片遮罩层动画jQuery插件
- js实现的简单图片浮动效果完整实例
- 爱分享 jquery 简单实用的无缝滚动效果
- 使用Qt实现简单的图片预览效果
- 实用的文本和图片无缝滚动效果
- ViewFlipper实现简单的幻灯片效果
- jquery实现简单的自动播放幻灯片效果