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】北京周边7日游——图标按路线轨迹行动

    原文:[百度地图API]北京周边7日游--图标按路线轨迹行动 任务描述: 春节就要来啦~酸奶小妹的妈妈要从遥远的重庆,来到北京过春节呢!酸奶小妹忙着给妈妈计划,北京周边的旅游线路.计划好路线后,就开始 ...

  2. 查询DBlink创建

    DBlink创建 查询 博客分类: Oracle   当用户要跨本地数据库,访问另外一个数据库表中的数据时,本地数据库中必须创建了远程数据库的dblink,通过dblink本地数据库可以像访问本地数据 ...

  3. 增加VMWare开机画面时间，来防止快速跳过而无法进入BIOS

    用记事本打开xx.vmx,在里面添加一行: bios.bootDelay = "30000" 意思是开机后,在开机画面里停留30秒.

  4. FPGA 设计怎样进行面积优化（逻辑资源占用量优化）

    FPGA面积优化 1 对于速度要求不是非常高的情况下,我们能够把流水线设计成迭代的形式,从而反复利用FPGA功能同样的资源. 2 对于控制逻辑小于共享逻辑时,控制逻辑资源能够用来复用,比如FIR滤波器 ...

  5. 告别alert,拥抱console

    记得学习javascript的第一个demo就是alert("Hello  World");可是学习接触javascript这么长时间了还是在alert,因为javascript调 ...

  6. Mac OSX系统安装和配置Zend Server 6教程（2）

    继上一节安装好Zend Server 6以后,我们需要修改配置文件.首先修改服务器监听端口.默认的情况下Zend Server 6安装以后的端口是10088.一般开发者使用的都是HTTP默认端口80. ...

  7. 根据当前登录域账号 获取AD用户姓名和所在OU目录

    #region 根据当前登录域账号 获取AD用户姓名和所在OU目录 /// <summary> /// 根据当前登录域账号 获取AD用户姓名和所在OU目录 返回域用户是否存在 /// &l ...

  8. lsof基本使用

    当你想在计算机上启动一个服务,电脑已经建议"port already in use",此时,可以使用lsof命令查看占用端口的进程(lsof -i:port). lsof这是LiS ...

  9. 浏览器检测(BrowserDetect.js)使用

    浏览器检测是在工作中经常用到的,如果只是简单判断当前是什么浏览器的话可以通过window.navigator.useragent这样的js来直接判断就可以了! 但是针对浏览器版本要求比较高的时候,如果 ...

  10. 在weblogic11g发布该项目时遇到错误（不支持web-app_3_0）

    problem: cvc-enumeration-valid: string value '3.0' is not a valid enumeration value for web-app-vers ...