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 相关文章推荐
Chosen 基于jquery的选择框插件使用方法
May 30 Javascript
jquery实现固定顶部导航效果(仿蘑菇街)
Mar 21 Javascript
localStorage的黑科技-js和css缓存机制
Feb 06 Javascript
微信小程序 标签传入数据
May 08 Javascript
JS传播事件、取消事件默认行为、阻止事件传播详解
Aug 14 Javascript
javascript 中模板方法单例的实现方法
Oct 17 Javascript
Parcel 打包示例(React HelloWorld)
Jan 16 Javascript
vue-cli下的vuex的简单Demo图解(实现加1减1操作)
Feb 26 Javascript
vue 注册组件的使用详解
May 05 Javascript
在vue中利用全局路由钩子给url统一添加公共参数的例子
Nov 01 Javascript
小程序api实现promise封装过程解析
Nov 21 Javascript
JavaScript本地储存:localStorage、sessionStorage、cookie的使用
Oct 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操作xml代码
2010/06/17 PHP
php制作unicode解码工具(unicode编码转换器)代码分享
2013/12/24 PHP
php实现每天自动变换随机问候语的方法
2015/05/12 PHP
PHP PDOStatement::getAttribute讲解
2019/02/01 PHP
云网广告中的代码,提示出错,大家找找
2006/11/21 Javascript
Javascript实例教程(19) 使用HoTMetal(6)
2006/12/23 Javascript
如何在Mozilla Gecko 用Javascript加载XSL
2007/01/09 Javascript
javascript中的作用域scope介绍
2010/12/28 Javascript
AngularJS入门教程之学习环境搭建
2014/12/06 Javascript
jQuery延迟加载图片插件Lazy Load使用指南
2015/03/25 Javascript
JQuery中DOM事件合成用法实例分析
2015/06/13 Javascript
javascript图片预加载完整实例
2015/12/10 Javascript
第一次接触神奇的Bootstrap菜单和导航
2016/08/01 Javascript
JavaScript面向对象编写购物车功能
2016/08/19 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
2017/03/02 Javascript
Vue2.0父组件与子组件之间的事件发射与接收实例代码
2017/09/19 Javascript
基于JavaScript中标识符的命名规则介绍
2018/01/06 Javascript
Vue中 axios delete请求参数操作
2020/08/25 Javascript
可拖拽组件slider.js使用方法详解
2020/12/04 Javascript
[04:56]经典回顾:前Ehome 与 前LGD
2015/02/26 DOTA
[48:23]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第一局
2016/03/05 DOTA
[00:48]完美“圣”典2016风云人物:xiao8宣传片
2016/11/30 DOTA
Python查询Mysql时返回字典结构的代码
2012/06/18 Python
用Python的pandas框架操作Excel文件中的数据教程
2015/03/31 Python
python开启debug模式的方法
2019/06/27 Python
python pygame实现滚动横版射击游戏城市之战
2019/11/25 Python
pycharm 添加解释器的方法步骤
2020/08/31 Python
漫威玩具服装及周边商品官方购物网站:Marvel Shop
2019/05/11 全球购物
意大利巧克力店:Chocolate Shop
2019/07/24 全球购物
学期自我评价
2014/01/27 职场文书
《水上飞机》教学反思
2014/04/10 职场文书
群众路线党员自我评议范文2014
2014/09/24 职场文书
热情服务标语
2014/10/07 职场文书
领导激励员工的演讲稿,各种会上用得到,建议收藏
2019/08/13 职场文书
《文化苦旅》读后感:阅读,让人诗意地栖居在大地上
2019/12/24 职场文书
springboot使用Redis作缓存使用入门教程
2021/07/25 Redis