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实现固定顶部导航效果(仿蘑菇街)
Mar 21 Javascript
Javascript中typeof 用法小结
May 12 Javascript
javascript中Date format(js日期格式化)方法小结
Dec 17 Javascript
Node.js 应用跑得更快 10 个技巧
Apr 03 Javascript
jQuery制作网页版选项卡
Jul 28 Javascript
JavaScript构建自己的对象示例
Nov 29 Javascript
jQuery插件zTree实现删除树子节点的方法示例
Mar 08 Javascript
javascript基本数据类型和转换
Mar 17 Javascript
vue实现样式之间的切换及vue动态样式的实现方法
Dec 19 Javascript
vuejs点击class变化的实例
Sep 05 Javascript
Vue发布订阅模式实现过程图解
Apr 30 Javascript
通过实例解析javascript Date对象属性及方法
Nov 04 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 开源AJAX框架14种
2009/08/24 PHP
php使用mb_check_encoding检查字符串在指定的编码里是否有效
2013/11/07 PHP
PHP CodeIgniter框架的工作原理研究
2015/03/30 PHP
分享php分页的功能模块
2015/06/16 PHP
基于Codeigniter框架实现的student信息系统站点动态发布功能详解
2017/03/23 PHP
动态表单验证的操作方法和TP框架里面的ajax表单验证
2017/07/19 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
php微信公众号开发之现金红包
2018/04/16 PHP
Laravel (Lumen) 解决JWT-Auth刷新token的问题
2019/10/24 PHP
Javascript 获取链接(url)参数的方法[正则与截取字符串]
2010/02/09 Javascript
基于jQuery的动态表格插件
2011/03/28 Javascript
JavaScript前补零操作实例
2015/03/11 Javascript
深入解析JavaScript框架Backbone.js中的事件机制
2016/02/14 Javascript
详解JavaScript中基于原型prototype的继承特性
2016/05/05 Javascript
Bootstrap学习笔记之css样式设计(2)
2016/06/07 Javascript
详解Angualr 组件间通信
2017/01/21 Javascript
Vue2.0结合webuploader实现文件分片上传功能
2018/03/09 Javascript
基于webpack.config.js 参数详解
2018/03/20 Javascript
javascript防抖函数debounce详解
2019/06/11 Javascript
[52:52]完美世界DOTA2联赛PWL S3 LBZS vs access 第一场 12.10
2020/12/13 DOTA
利用Django框架中select_related和prefetch_related函数对数据库查询优化
2015/04/01 Python
Python实现字典的key和values的交换
2015/08/04 Python
分享一个pycharm专业版安装的永久使用方法
2019/09/24 Python
Python hmac模块使用实例解析
2019/12/24 Python
tensorflow实现打印ckpt模型保存下的变量名称及变量值
2020/01/04 Python
推荐10个CSS3 制作的创意下拉菜单效果
2014/02/11 HTML / CSS
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
2014/12/30 HTML / CSS
COACH德国官方网站:纽约现代奢侈品牌,1941年
2018/06/09 全球购物
高级文秘工作总结的自我评价
2013/09/28 职场文书
电气技术员岗位职责
2013/11/19 职场文书
自动化职业生涯规划书范文
2014/01/03 职场文书
预备党员的自我评价
2014/03/12 职场文书
2019年自助餐厅创业计划书模板
2019/08/22 职场文书
导游词之天津古文化街
2019/11/09 职场文书
JavaScript实现贪吃蛇游戏
2021/06/16 Javascript
如何使用pdb进行Python调试
2021/06/30 Python