Cycle2 是一个流行已久的 jQuery Cycle 幻灯片插件的升级版,它支持响应式的界面,提供了多种参数可自定义设置。它内置了控制界面,同时也能显示图像加载进度,而且还提供了四种变换效果。对于想要打造完全个性化幻灯片的人来说,此插件是非常合适的。
插件功能特性:
支持图片加载进度
支持移动设备
自适应
自定义选项(这个应该是插件必须的)
支持 上一页、下一页、幻灯片标题、分页导航(1、2、3、4 或者 图片 或者按钮 都是可以的)、覆盖层的控制
粗略看了下,升级后支持,部分之前就支持,应该是有改善,新增的部分在于 移动设备支持、图片加载进度、自适应,更重要实用的应该在于 代码写的更少了,更智能了。
开始基本使用
页面放入 jquery 和 cycle2,代码如下:
<script src="jquery.min.js">
</script>
<script src="/jquery.cycle2.js"></script>
幻灯片 html
<div class="cycle-slideshow">
<img src="images/p1.jpg">
<img src="images/p2.jpg">
<img src="images/p3.jpg">
<img src="images/p4.jpg">
</div>
cycle-slideshow 这个class 告诉插件开始运行我们的效果。
上面的设置正确后,效果就有了。
发现cycle2真的更简单了。
插件主页:http://www.malsup.com/jquery/cycle2/
demo地址:http://www.malsup.com/jquery/cycle2/demo/basic.php
http://blog.163.com/xz551@126/blog/static/821257972012101541835491/