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 相关文章推荐
jQuery使用数组编写图片无缝向左滚动
Dec 11 Javascript
jquery实现输入框动态增减的实例代码
Jul 14 Javascript
正负小数点后两位浮点数实现原理及代码
Sep 06 Javascript
IE网页js语法错误2行字符1、FF中正常的解决方法
Sep 09 Javascript
用jquery仿做发微博功能示例
Apr 18 Javascript
浅谈JavaScript事件的属性列表
Mar 01 Javascript
JS实现向表格行添加新单元格的方法
Mar 30 Javascript
JS实现的手机端精简幻灯片效果
Sep 05 Javascript
javascript表单控件实例讲解
Sep 13 Javascript
在小程序中使用Echart图表的示例代码
Aug 02 Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
Sep 06 Javascript
vue+element 实现商城主题开发的示例代码
Mar 26 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
PHPThumb PHP 图片缩略图库
2012/03/11 PHP
centos下file_put_contents()无法写入文件的原因及解决方法
2017/04/01 PHP
laravel 验证错误信息到 blade模板的方法
2019/09/29 PHP
激活 ActiveX 控件
2006/10/09 Javascript
js页面滚动时层智能浮动定位实现(jQuery/MooTools)
2011/08/23 Javascript
用jQuery模拟页面加载进度条的实现代码
2011/12/19 Javascript
JS判断数组中是否有重复值得三种实用方法
2013/08/16 Javascript
简介JavaScript中strike()方法的使用
2015/06/08 Javascript
JavaScript实现添加及删除事件的方法小结
2015/08/04 Javascript
jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法
2015/08/08 Javascript
jQuery实现的简洁下拉菜单导航效果代码
2015/08/26 Javascript
JavaScript多并发问题如何处理
2015/10/28 Javascript
javascript从作用域链谈闭包
2020/07/29 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
2016/08/25 Javascript
javascript 定时器工作原理分析
2016/12/03 Javascript
javascript实现的图片预览功能
2017/03/25 Javascript
利用js将ajax获取到的后台数据动态加载至网页中的方法
2018/08/08 Javascript
如何制作一个Node命令行图像识别工具
2018/12/12 Javascript
深入理解js A*寻路算法原理与具体实现过程
2018/12/13 Javascript
vue中使用微信公众号js-sdk踩坑记录
2019/03/29 Javascript
小程序getLocation需要在app.json中声明permission字段
2019/04/04 Javascript
js实现烟花特效
2020/03/02 Javascript
javascript执行上下文、变量对象实例分析
2020/04/25 Javascript
Antd的Table组件嵌套Table以及选择框联动操作
2020/10/24 Javascript
[01:30]2016国际邀请赛中国区预选赛神秘商店火爆开启
2016/06/26 DOTA
python创建和删除目录的方法
2015/04/29 Python
MAC中PyCharm设置python3解释器
2017/12/15 Python
python 判断linux进程,并杀死进程的实现方法
2019/07/01 Python
解决Keras使用GPU资源耗尽的问题
2020/06/22 Python
用python实现前向分词最大匹配算法的示例代码
2020/08/06 Python
Python使用Pygame绘制时钟
2020/11/29 Python
英国最大的婴儿监视器网上商店:Baby Monitors Direct
2018/04/24 全球购物
英语老师推荐信
2014/02/26 职场文书
商场开业庆典策划方案
2014/06/02 职场文书
职业生涯规划书怎么写?
2014/09/14 职场文书
检查机关领导群众路线教育实践活动个人整改措施
2014/10/28 职场文书