jQuery图片切换插件jquery.cycle.js使用示例


Posted in Javascript onJune 16, 2014

Cycle是一个很棒的jQuery图片切换插件,提供了非常好的功能来帮助大家更简单的使用插件的幻灯功能

下载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秒就以交叉淡入淡出的方式切换到下一个列表项,如图
jQuery图片切换插件jquery.cycle.js使用示例 
为插件方法指定参数

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等等。

源码下载

Javascript 相关文章推荐
对联广告js flash激活
Oct 19 Javascript
Javascript 刷新全集常用代码
Nov 22 Javascript
iframe子页面与父页面在同域或不同域下的js通信
May 07 Javascript
JavaScript判断DIV内容是否为空的方法
Jan 29 Javascript
jquery ajax局部加载方法详解(实现代码)
May 12 Javascript
js匿名函数使用&amp;传参(实例)
Sep 08 Javascript
使用JavaScript实现node.js中的path.join方法
Aug 12 Javascript
详解JavaScript作用域和作用域链
Mar 19 Javascript
详解小程序退出页面时清除定时器
Apr 28 Javascript
微信小程序纯文本实现@功能
Apr 08 Javascript
vue单应用在ios系统中实现微信分享功能操作
Sep 07 Javascript
vue项目中js-cookie的使用存储token操作
Nov 13 Javascript
select多选 multiple的使用示例
Jun 16 #Javascript
一个可以增加和删除行的table并可编辑表格中内容
Jun 16 #Javascript
javascript动态判断html元素并执行不同的操作
Jun 16 #Javascript
Js实现滚动变色的文字效果
Jun 16 #Javascript
jquery模拟LCD 时钟的html文件源代码
Jun 16 #Javascript
Javascript图片上传前的本地预览实例
Jun 16 #Javascript
jquery的ajax异步请求接收返回json数据实例
Jun 16 #Javascript
You might like
php 开发中加密的几种方法总结
2017/03/22 PHP
PHP弱类型语言中类型判断操作实例详解
2017/08/10 PHP
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
php判断电子邮件是否正确方法
2018/12/04 PHP
使用onbeforeunload属性后的副作用
2007/03/08 Javascript
javascript new一个对象的实质
2010/01/07 Javascript
jQuery中map()方法用法实例
2015/01/06 Javascript
JavaScript使用Max函数返回两个数字中较大数的方法
2015/04/06 Javascript
javascript实现倒计时并弹窗提示特效
2015/06/05 Javascript
JS实现超简洁网页title标题跑动闪烁提示效果代码
2015/10/23 Javascript
深入浅析JavaScript中数据共享和数据传递
2016/04/25 Javascript
vue2.0结合DataTable插件实现表格动态刷新的方法详解
2017/03/17 Javascript
vue一步步实现alert功能
2017/07/05 Javascript
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
2017/08/17 Javascript
微信小程序 上传头像的实例详解
2017/10/27 Javascript
Node之简单的前后端交互(实例讲解)
2017/11/14 Javascript
Vue实现按钮旋转和移动位置的实例代码
2018/08/09 Javascript
探索JavaScript中私有成员的相关知识
2019/06/13 Javascript
vue+vant实现商品列表批量倒计时功能
2020/01/13 Javascript
jQuery实现本地存储
2020/12/22 jQuery
[34:08]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS EG
2018/03/30 DOTA
[56:42]完美世界DOTA2联赛循环赛 Matador vs Forest 第二场 11.06
2020/11/06 DOTA
5分钟 Pipenv 上手指南
2018/12/20 Python
Django 表单模型选择框如何使用分组
2019/05/16 Python
python实现两个经纬度点之间的距离和方位角的方法
2019/07/05 Python
在tensorflow以及keras安装目录查询操作(windows下)
2020/06/19 Python
Pycharm创建文件时自动生成文件头注释(自定义设置作者日期)
2020/11/24 Python
详解numpy1.19.4与python3.9版本冲突解决
2020/12/15 Python
对CSS3选择器的研究(详解)
2016/09/16 HTML / CSS
英国电子产品购物网站:TobyDeals
2018/07/30 全球购物
高一政治教学反思
2014/01/28 职场文书
班班通项目实施方案
2014/02/25 职场文书
父母对孩子的寄语
2014/04/09 职场文书
联片教研活动总结
2014/07/01 职场文书
2015年党总支工作总结
2015/05/25 职场文书
情感电台广播稿
2015/08/18 职场文书