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之五(取DOM元素)
Jun 20 Javascript
treepanel动态加载数据实现代码
Dec 15 Javascript
往光标所在位置插入值的js代码
Sep 22 Javascript
使用VS开发 Node.js指南
Jan 06 Javascript
详解JavaScript表单验证(E-mail 验证)
Mar 31 Javascript
手机端js和html5刮刮卡效果
Sep 29 Javascript
浅析JavaScript中var that=this
Feb 17 Javascript
javaScript字符串工具类StringUtils详解
Dec 08 Javascript
详解webpack编译多页面vue项目的配置问题
Dec 11 Javascript
剖析Angular Component的源码示例
Mar 23 Javascript
用POSTMAN发送JSON格式的POST请求示例
Sep 04 Javascript
Node.js中读取TXT文件内容fs.readFile()用法
Oct 10 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+mysql分页代码详解
2008/03/27 PHP
php 获取百度的热词数据的代码
2012/02/18 PHP
PHP数据库万能引擎类adodb配置使用以及实例集锦
2014/06/12 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
用Jquery实现多级下拉框无刷新的联动
2010/12/22 Javascript
JS Map 和 List 的简单实现代码
2013/07/08 Javascript
javascript预加载图片、css、js的方法示例介绍
2013/10/14 Javascript
js弹出确认是否删除对话框
2014/03/27 Javascript
javascritp添加url参数将参数加入到url中
2014/09/25 Javascript
JQuery中Text方法用法实例分析
2015/05/18 Javascript
JS三级可折叠菜单实现方法
2016/02/29 Javascript
完美解决jQuery符号$与其他javascript 库、框架冲突的问题
2016/08/09 Javascript
js实现滑动到页面底部自动加载更多功能
2017/02/15 Javascript
解决vue2.x中数据渲染以及vuex缓存的问题
2017/07/13 Javascript
详解JavaScript中的六种错误类型
2017/09/21 Javascript
Node.js文件编码格式的转换的方法
2018/04/27 Javascript
微信小程序自定义对话框弹出和隐藏动画
2018/07/19 Javascript
JS控制下拉列表左右选择实例代码
2020/05/08 Javascript
Python求导数的方法
2015/05/09 Python
Python中的深拷贝和浅拷贝详解
2015/06/03 Python
玩转python爬虫之URLError异常处理
2016/02/17 Python
浅谈编码,解码,乱码的问题
2016/12/30 Python
python3+PyQt5泛型委托详解
2018/04/24 Python
python验证码识别教程之利用滴水算法分割图片
2018/06/05 Python
python打开使用的方法
2019/09/30 Python
Python for循环通过序列索引迭代过程解析
2020/02/07 Python
python中的错误如何查看
2020/07/08 Python
html5实现多图片预览上传及点击可拖拽控件
2018/03/15 HTML / CSS
基于html5 canvas做批改作业的小插件
2020/05/20 HTML / CSS
印度民族服装购物网站:BIBA
2019/08/05 全球购物
Linux如何为某个操作添加别名
2015/02/05 面试题
绝对经典成功的大学生推荐信
2013/11/08 职场文书
创业融资计划书
2014/04/25 职场文书
国际贸易毕业生求职信
2014/07/20 职场文书
如何利用React实现图片识别App
2022/02/18 Javascript
请求模块urllib之PYTHON爬虫的基本使用
2022/04/08 Python