jQuery图片切换插件jquery.cycle.js
Cycle是一个很棒的jQuery图片切换插件,提供了很好的功能来帮助大家更简单的使用插件的幻灯功能
通过Cycle插件能够将这个列表转换成能够交互的幻灯片。
包括下面特效blindX,cover,curtainX,fadeZoom,growX,scrollUp,shuffle,slideX等等。
下载cycle插件并引入,此时,注意把引入它的代码放在引入jQuery主文件之后。
<head> <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script> <script type="text/javascript" src="js/jquery.cycle.all.js"></script> <link href="style.css" rel="stylesheet" type="text/css" > </head>jquery.cycle.all.js在演示代码中有。
Cycle插件能够作用于页面中的不论什么一组同辈元素。
为展示这一点,我们须要一个简单的
HTML文档,文档中是一个包括商品封面和相关信息的列表,能够加入到HTML文档的主体中:
<ul id="goods"> <li> <img src="img/lenovopad.jpg" alt="lenove pad" /> <div class="title">联想A3000(8GB/白色)</div> <div class="author">娱乐平板电脑,手机平板电脑 </div> </li> <li> <img src="img/note3.jpg" alt="note3" /> <div class="title">三星GALAXY Note III</div> <div class="author">三星Note系列的第三代产品,配备5.7英寸全高清炫丽屏(Super AMOLED), 分辨率为1080P(1920*1080像素)</div> </li> <li> <img src="img/ipadair.png" alt="ipadair" /> <div class="title">iPad Air</div> <div class="author">iPad Air拥有令人惊叹的iPad Air纤薄轻巧。通过一系列改进,我们将iPad Air 的体积比上一代iPad减小了近四分之中的一个.虽然如此,当拿起它时,你仍会发觉它依旧牢固耐用。</div> </li> </ul>在CSS中加入一些样式,就能够在页面中显示出来了
html, body { margin: 0; padding: 0; } body { font: 62.5% Verdana, Helvetica, Arial, sans-serif; color: #000; background: #fff; } ul#goods { list-style: none; margin: 0; padding: 0; height: 210px; width: 500px; overflow: hidden; } ul#goods li { list-style: none; margin: 0; padding: 0; height: 210px; width: 500px; background-color: #F79321; position: relative; } ul#goods li img { position: absolute; left: 0; top: 0; width: 300px; height: 210px; } ul#goods li .title { margin-left: 300px; padding: 10px; width: 180px; font-weight: bold; font-size: 1.2em; background-color: #000; color: #fff; overflow: hidden; } ul#goods li .author { margin-left: 300px; padding: 10px 10px 0 10px; width: 180px; font-weight: bold; background-color: #F79321; color: #fff; }
通过Cycle插件能够将这个列表转换成能够交互的幻灯片。
在DOM中适当的容器上调用.cycle()方法,就能够实现这一转换。
$(document).ready(function() { $('#goods').cycle(); });这个语法简单得不能再简单了。
和之前使用其它内置的jQuery方法一样,我们也在一个包括DOM元素的jQuery对象上调用了
.cycle()。即使没有提供不论什么參数 .cycle()也能够帮我们完毕转换工作。
当中包括改动页面的样式,
以便每次仅仅显示一个列表项,然后每4秒就以交叉淡入淡出的方式切换到下一个列表项,如图
为插件方法指定參数
Cycle()方法为我们提供了许多的參数,详细每一个參数的详细作用 在此不一一叙述,请查阅其它文档
我们能够改动Cycle插件的两个幻灯片之间的播放速度和动画形式,改动幻灯片变换的触发方式。
$(document).ready(function() { $('#goods').cycle({ timeout: 2000, speed: 200, pause: true }); });第一个timeout选项用于指定切换幻灯片之间等待的毫秒数(2000),而speed决定切换本身要花的毫秒数(200)。
在把pause设置为true的情况下,幻灯片会在鼠标进入时暂停播放,这在幻灯片中包括能够单击的链接时很实用。
当中Cycle有一个很重要的參数:fx:作用是选择特效。
$('#goods').cycle({ fx:'fade', timeout: 2000, speed: 200, pause: true });
包括下面特效blindX,cover,curtainX,fadeZoom,growX,scrollUp,shuffle,slideX等等。
演示代码:http://download.csdn.net/detail/itmyhome/7503119