javascript代码实例教程-jQuery图片切换插件jquery.cycle.js使用示例
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-jQuery图片切换插件jquery.cycle.js使用示例，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。
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" />
<p class="tITle">联想A3000(8GB/白色)</p>
<p class="author">娱乐平板电脑,手机平板电脑 </p>
</li>
<li>
<img src="img/note3.jpg" alt="note3" />
<p class="title">三星GALAXY Note III</p>
<p class="author">三星Note系列的第三代产品,配备5.7英寸全高清炫丽屏(Super amOLED),
分辨率为1080P(1920*1080像素)</p>
</li>
<li>
<img src="img/ipadair.png" alt="ipadair" />
<p class="title">iPad Air</p>
<p class="author">iPad Air拥有令人惊叹的iPad Air纤薄轻巧。通过一系列改进,我们将iPad Air
的体积比上一代iPad减小了近四分之一.尽管如此,当拿起它时,你仍会发觉它依然坚固耐用。</p>
</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秒就以交叉淡入淡出的方式切换到下一个列表项，如图
为插件方法指定参数
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等等。
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
脚本宝典总结
以上是脚本宝典为你收集整理的javascript代码实例教程-jQuery图片切换插件jquery.cycle.js使用示例全部内容，希望文章能够帮你解决javascript代码实例教程-jQuery图片切换插件jquery.cycle.js使用示例所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
- 前端学java系列（1）——搭建环境 2019-11-04
- JavaScript教程- JavaScript 语句 2018-11-21
- JavaScript教程- JavaScript 语法 2018-11-20
- JavaScript教程- JavaScript 输出 2018-11-20
- JavaScript教程- JavaScript 用法 2018-11-20
- JavaScript教程- JavaScript 简介 2018-11-20
- 重温java基础 2018-11-20
- 了解JavaScript中的Spread运算符 2018-11-17
- js数组操作常用方法超级完整版本值得收藏 2018-11-16
- 谷歌JavaScript风格指南中值得注意的13点 2018-11-11
- 前端学java系列（1）——搭建环境
- 【myeclipse】——Java 内存溢出（java.lang.OutOfMemoryError）
- dun ru jiang hu
- C语言基础知识补充
- javascript代码实例教程-Dom 学习总结及其实例
- javascript代码实例教程-Javascript：必须知道的Javascript知识点之“字面量和对应类型...
- javascript代码实例教程-Javascript：必须知道的Javascript知识点之“this指针”
- javascript代码实例教程-javascript中encodeURI和decodeURI方法
- javascript代码实例教程-EXTJs 表单控件
- javascript代码实例教程-Extjs4――实现动态的grid（即实现数据库表数据的显示）
- 前端学java系列（1）——搭建环境
- 【myeclipse】——Java 内存溢出（java.lang.OutOfMemoryError）
- dun ru jiang hu
- C语言基础知识补充
- vue项目优化--服务端渲染优化
- javascript代码实例教程-Dom 学习总结及其实例
- javascript代码实例教程-Javascript：必须知道的Javascript知识点之“字面量和对应类型...
- javascript代码实例教程-Javascript：必须知道的Javascript知识点之“this指针”
- javascript代码实例教程-javascript中encodeURI和decodeURI方法
- javascript代码实例教程-EXTJs 表单控件