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. ASP.NET的CMS

    最受欢迎的ASP.NET的CMS下载 1. Umbraco 项目地址 | 下载 Umbraco是一个开放源码的CMS内容管理系统,基于asp.net建立,使用mssql进行存储数据. 使用Umbrac ...

  2. Android - 视图Android应用(apk)签名

    视图Android应用(apk)签名 本文地址: http://blog.csdn.net/caroline_wendy 在微博.微信开放平台注冊应用时,须要填写应用(apk)的签名,能够使用keyt ...

  3. 01. SQL Server 如何读写数据

    原文:01. SQL Server 如何读写数据 一. 数据读写流程简要SQL Server作为一个关系型数据库,自然也维持了事务的ACID特性,数据库的读写冲突由事务隔离级别控制.无论有没有显示开启 ...

  4. Ormlite or()的使用

    如题,由于不熟悉这个框架的API,所以用的时候出错了,直接上代码 public List<Type> getAllBetweenDate(String start, String end) ...

  5. PHP添加Mssql/sqlserver2000扩展，适用于Php5.2/Php5.3/Php5.4

    原文:PHP添加Mssql/sqlserver2000扩展,适用于Php5.2/Php5.3/Php5.4 本文介绍如何在Windows下配置php扩展. 本文链接 http://blog.csdn. ...

  6. <转>如何利用socket进行HTTP访问

    原文:<转>如何利用socket进行HTTP访问 如何利用socket进行HTTP访问 平常我们要访问某个URL一般都是通过浏览器进行:提交一个URL请求后,浏览器将请求发向目标服务器或者 ...

  7. Mongodb操作之查询（循序渐进对比SQL语句）

    工具推荐:Robomongo,可自行百度寻找下载源,个人比较推荐这个工具,相比较mongoVUE则更加灵活. 集合简单查询方法 mongodb语法:db.collection.find()  //co ...

  8. 一张地图，告诉你NodeJS命令行调试器语句

    NodeJS提供脚本调试. 进入node debug xx.js您可以进入调试模式. 版权声明:本文博客原创文章,博客,未经同意,不得转载.

  9. jquery.validate 以alert方式显示错误方法

    $.validator.setDefaults({ submitHandler: function() { alert("submitted!");return false; } ...

  10. shell 水平测试

    http://bbs.chinaunix.net/thread-476260-1-1.html 版权声明:本文博客原创文章,博客,未经同意,不得转载.