Cycle是一个很棒的jQuery图片切换插件,提供了非常好的功能来帮助大家更简单的使用插件的幻灯功能
通过Cycle插件可以将这个列表转换成可以交互的幻灯片。在DOM中适当的容器上调用.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>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> 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(); });.cycle()。即使没有提供任何参数 .cycle()也可以帮我们完成转换工作。其中包括修改页面的样式,
以便每次只显示一个列表项,然后每4秒就以交叉淡入淡出的方式切换到下一个列表项，如图
为插件方法指定参数
Cycle()方法为我们提供了非常多的参数,具体每个参数的具体作用 在此不一一叙述,请查阅其他文档
我们可以修改Cycle插件的两个幻灯片之间的播放速度和动画形式,修改幻灯片变换的触发方式。
$(document).ready(function() { $(‘#goods‘).cycle({timeout: 2000, speed: 200, pause: true }); });在把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
???????????
再分享一下我老师大神的人工智能教程吧。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！https://blog.csdn.net/jiangjunshow
jQuery图片切换插件jquery cycle js
原文地址：https://www.cnblogs.com/skiwnchqhh/p/10339418.html