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秒就以交叉淡入淡出的方式切换到下一个列表项，如图


为插件方法指定参数

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等等。

演示代码：http://download.csdn.net/detail/itmyhome/7503119

jQuery图片切换插件jquery.cycle.js的更多相关文章

  1. jquery图片切换插件jquery.cycle.js参数详解

    转自:国人的力量 blog.163.com/xz551@126/blog/static/821257972012101541835491/ 自从使用了jquery.cycle.js,我觉得再也不用自己 ...

  2. 推荐几款jquery图片切换插件

    一.前言 毕业季到了,大家都在匆匆忙忙的记录大学里最美好的时光,照片中各种花式.各种姿势都涌现出来了.这么多的照片怎么展示出来给自己的好友看呢?有人选择做成视频,有人选择ps之后做成图片集,而我选择利 ...

  3. jQuery图片延迟加载插件jQuery.lazyload

      插件描述:jQuery图片延迟加载插件jQuery.lazyload,使用延迟加载在可提高网页下载速度.在某些情况下,它也能帮助减轻服务器负载. 使用方法 引用jquery和jquery.lazy ...

  4. jQuery图片延迟加载插件jquery.lazyload.js

    在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽.这也就是们通 ...

  5. jQuery图片延迟加载插件jQuery.lazyload使用方法（转）

    使用方法 1.引用jquery和jquery.lazyload.js到你的页面 <script src="jquery-1.11.0.min.js"></scri ...

  6. jQuery图片延迟加载插件jQuery.lazyload 的使用

    使用方法 引用jquery和jquery.lazyload.js到你的页面 1 2 <script src="jquery-1.11.0.min.js"></sc ...

  7. 10款好用的 jQuery 图片切换效果插件

    jQuery 是一个非常优秀的 Javascript 框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入一些让人惊叹的效 ...

  8. 分享22款响应式的 jQuery 图片滑块插件

    响应式(Responsive)设计的目标是要让产品界面能够响应用户的行为,根据不同终端设备自动调整尺寸,带给用户良好的使用体验.这篇文章收集了22款优秀的响应式 jQuery 幻灯片插件,它们能够帮助 ...

  9. 一款手机端的jQuery图片滑块插件

    今天我们要介绍一款比较特别的jQuery图片滑块插件,它不仅在PC浏览器上可以使用,而且更适合在手机端的网页中使用.这款jQuery插件不仅可以定义图片切换的方向,而且可以即时切换图片切换的动画方式, ...

随机推荐

  1. 百度地图API 添加自定义标注 多点标注

    原文:百度地图API 添加自定义标注 多点标注 分四个文件 location.php map.css 图片 数据库 数据库配置自己改下 -------------------------------- ...

  2. 西门子PLC学习笔记8-（计时器）

    计时器port这包括:信号输入.时间.复位信号.出口.[计时器剩余时间(BI二进制表示法.BCD码表示)其输出被存储MW] 定时器包括::S_PULSE(脉冲定时器).S_PEXT(延时脉冲定时器). ...

  3. Github Pages 静态网页建站

    创建仓库 略.详见GitHub使用教程. 仓库属性设置 找Github Pages项.点击自己主动生成,依照提示操作,就会得到该项目的gh-pages 分支. 公布站点成功,地址为 http://ch ...

  4. my97 日期控件

    官网:http://www.my97.net/   好多广告啊! 文档地址: http://www.mysuc.com/test/My97DatePicker/

  5. MySQL 升级方法指南大全

    原文:MySQL 升级方法指南大全 通常,从一个发布版本升级到另一个版本时,我们建议按照顺序来升级版本.例如,想要升级 MySQL 3.23 时,先升级到 MySQL 4.0,而不是直接升级到 MyS ...

  6. asp.net mvc3 数据验证（三）—自定义数据注解

    原文:asp.net mvc3 数据验证(三)-自定义数据注解         前两节讲的都是asp.net mvc3预先设定的数据注解,但是系统自由的数据注解肯定不适合所有的场合,所以有时候我们需要 ...

  7. 如何将sqlserver表中的数据导出sql语句或生成insert into语句 [转]

    输入表名,生成插入语句 drop proc proc_insert //如果存在就删除 go create proc proc_insert (@tablename varchar(256)) as ...

  8. 湘潭oj1203/邀请赛A称号 数论+java睑板

    乞讨 n%1+n%2+n%3+n%4+.........n%n=,n<=10^12次要. 一味的找规律之初.没有发现.后来,前辈执教后,人才平淡,所以,现在唯一明确的. 首先在地图上: 对于该题 ...

  9. jQuery选取和操纵元素的特点

    jQuery选取和操纵元素的特点 JavaScript选取元素 先来看看不用jQuery的时候我们是怎么处理元素选取的. JavaScript选取元素的时候,可以根据id获取元素,当id不存在的时候, ...

  10. IntelliJ IDEA 13 破解安装（JRebel 5.6.3a皴）

    首先安装IntelliJ 13,记住下载Ultimate Edition版本号,否则就必须打破..   安装到本地.然后一些配置(这一步不能.不过考虑到交换系统后,保存,建议做) 打开{install ...