强大的jQuery Cycle Plugin插件实现图片等元素循环展示功能

强大的jQuery Cycle Plugin插件实现图片等元素循环展示功能

图片展示效果的jQuery插件很多,都非常实用, 这个jQuery Cycle Plugin循环插件,不仅支持图片循环,而且支持任意元素的循环功能,效果非常丰富,可支持鼠标悬停暂停,自动停止,开始和结束事件调用等等,目前你所看到的图片效果大部分都支持,可以想象这个插件的强大,效果图如下:

使用说明
需要使用jQuery库文件和jQuery Cycle Plugin库文件http://jquery.com/ http://plugins.jquery.com/project/cycle需要自定义CSS样式,如:.pics {height: 232px;width: 232px;padding: 0;margin: 0;}.pics img {padding: 15px;border: 1px solid #ccc;background-color: #eee;width: 200px;height: 200px;top: 0;left: 0}使用实例
一,包含文件部分<script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="jquery.cycle.js"></script>二,HTML部分<div id="biuuu" class="pics"><img src="images/beach1.jpg" width="200" height="200" /><img src="images/beach2.jpg" width="200" height="200" /><img src="images/beach3.jpg" width="200" height="200" /></div>三,Javascript部分$('#biuuu').cycle('fade');jQuery Cycle Plugin插件使用非常简单,如上实例对ID为biuuu的DIV元素调用jQuery Cycle Plugin,这样就实现了一个图片循环展示的效果,jQuery Cycle Plugin可选效果非常多。

几个常用的使用方法

一,自定义Cycle 循环展示效果$('#biuuu').cycle({fx: 'scrollDown'});其中fx表示需要使用的效果参数,如上:scrollDown

二,自定义Cycle 循环展示的速度和延迟值$('#biuuu').cycle({fx: 'fade',speed: 2500});其中speed表示显示的速度$('#biuuu').cycle({fx: 'scrollDown',speed: 300,timeout: 2000});其中timeout表示显示下一张的延迟值

三,其它应用$('#biuuu').cycle({fx: 'fade',pause: 1});$('#biuuu').cycle({fx: 'scrollDown',random: 1});使用jQuery Cycle Plugin插件不仅简单,效果也非常丰富,值得推荐!

jQuery Cycle Plugin插件官方文档说明http://malsup.com/jquery/cycle/jQuery Cycle Plugin插件在线演示http://malsup.com/jquery/cycle/begin.htmljQuery Cycle Plugin插件下载http://malsup.com/jquery/cycle/download.html