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. [MySQL]--&gt;查询5天之内过生日的同事中的闰年2月29日问题的解决过程

    前言: 上次写了查询5天之内过生日的同事中的跨年问题的解决过程,网址为:http://blog.csdn.net/mchdba/article/details/38952033 ,当中漏了一个闰年2月 ...

  2. IntelliJ IDEA 开发scala

    1.下载安装IntelliJ IDEA,并安装scala插件 我下载的是linux的13版本,linux版本是绿色版本,有一个启动的脚本,运行就可以了,也可以在linux建立快捷方式.windows的 ...

  3. 【Swift】 GET&POST请求 网络缓存的简单处理

     GET & POST 的对比 源码:https://github.com/SpongeBob-GitHub/Get-Post.git 1. URL - GET 所有的参数都包含在 URL 中 ...

  4. C# WebBrowser 代理的使用

    原文:C# WebBrowser 代理的使用 The WebBrowser control is just an embeddded IE Control, I believe any setting ...

  5. HDU 1501 Zipper(DP，DFS)

    意甲冠军  是否可以由串来推断a,b字符不改变其相对为了获取字符串的组合c 本题有两种解法  DP或者DFS 考虑DP  令d[i][j]表示是否能有a的前i个字符和b的前j个字符组合得到c的前i+j ...

  6. CSS3制作

    目标是制作如下面DEMO显示的一个日历效果: HTML Markup 先来看看其结构: <div class="calendar"> <span class=&q ...

  7. Asp.net vNext 学习3

    Asp.net vNext 学习之路(三) asp.net vNext 对于构建asp.net 程序带来了一些重大的改变,让我们开发asp.net 程序的时候更加的方便和高效. 1,可以很容易的去管理 ...

  8. C# 复习（1） 委托与事件

    委托定义顺序 1. 声明一个委托 2.定义一个委托变量 3. 委托变量的初始化或者给委托变量绑定一个方法 4.调用委托 事件:事件是对委托的封装. 事件只能在创建事件的类的内部调用. public c ...

  9. JS获取标签方法及兼容处理

    document.getElementById('Id名');  // 所有浏览器 document.getElementsByTagName('标签名'); // 所有浏览器 document.ge ...

  10. atitit.ajax bp dwr 3.该票据安排使用的流量汇总 VO9o.....

    atitit.ajax bp dwr 3.该票据安排使用的流量汇总 VO9o..... 1. 安装配置 1 1.1. 下载  dwr.jar 1M 1 1.2. 配置注解方式..web.xml 1 2 ...