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 相关文章推荐
基于json的jquery地区联动效果代码
Jul 06 Javascript
js和jquery对dom节点的操作(创建/追加)
Apr 21 Javascript
jquery form表单序列化为对象的示例代码
Mar 05 Javascript
红米手机抢购的js代码
Mar 10 Javascript
深入理解Javascript中的valueOf与toString
Jan 04 Javascript
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
Jan 16 Javascript
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
Sep 06 Javascript
Vue 实例事件简单示例
Sep 19 Javascript
小程序接入腾讯位置服务的详细流程
Mar 03 Javascript
浅谈在vue-cli3项目中解决动态引入图片img404的问题
Aug 04 Javascript
js实现简单选项卡制作
Aug 05 Javascript
vue 递归组件的简单使用示例
Jan 14 Vue.js
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技术构造远程服务(上)
2006/10/09 PHP
php session 错误
2009/05/21 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
PHP面向对象程序设计之构造方法和析构方法详解
2019/06/13 PHP
PHP超级全局变量【$GLOBALS,$_SERVER,$_REQUEST等】用法实例分析
2019/12/11 PHP
检测是否已安装 .NET Framework 3.5的js脚本
2009/02/14 Javascript
js 实现无缝滚动 兼容IE和FF
2009/07/15 Javascript
实现png图片和png背景透明(支持多浏览器)的方法
2009/09/08 Javascript
JS文本框追加多个下拉框的值的简单实例
2013/07/12 Javascript
js实现的GridView即表头固定表体有滚动条且可滚动
2014/02/19 Javascript
jQuery Validate 验证,校验规则写在控件中的具体实例
2014/02/27 Javascript
javascript为下拉列表动态添加数据项
2014/05/23 Javascript
原创jQuery弹出层插件分享
2015/04/02 Javascript
Javascript通过overflow控制列表闭合与展开的方法
2015/05/15 Javascript
js查看一个函数的执行时间实例代码
2015/09/12 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
2015/10/29 Javascript
node.js 动态执行脚本
2016/06/02 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
2017/03/06 Javascript
JQuery特殊效果和链式调用操作示例
2019/05/13 jQuery
小程序server请求微信服务器超时的解决方法
2019/05/21 Javascript
Electron + vue 打包桌面操作流程详解
2019/06/24 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
2019/11/07 Javascript
Jquery ajax书写方法代码实例解析
2020/06/12 jQuery
JS访问对象两种方式区别解析
2020/08/29 Javascript
用python实现批量重命名文件的代码
2012/05/25 Python
对matplotlib改变colorbar位置和方向的方法详解
2018/12/13 Python
PyQt5通信机制 信号与槽详解
2019/08/07 Python
python基于pdfminer库提取pdf文字代码实例
2019/08/15 Python
使用已经得到的keras模型识别自己手写的数字方式
2020/06/29 Python
iHerb香港:维生素、补充剂和天然保健品
2017/08/01 全球购物
新加坡网上花店:FlowerAdvisor新加坡
2018/10/05 全球购物
新手上路标语
2014/06/20 职场文书
情侣之间的道歉短信
2015/05/12 职场文书
校园新闻稿范文
2015/07/18 职场文书
大学入学感言
2015/08/01 职场文书
服装店员工管理制度
2015/08/07 职场文书