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. WebApi统一输出接口

    public class WebApi { /// <summary> /// 成功后的输出 /// </summary> /// <param name="d ...

  2. ［ Alcatraz ］管理Xcode插件

    ［ Alcatraz 配置 ］ 1.包管理器在线安装 Terminal终端 $ curl -fsSL https://raw.githubusercontent.com/supermarin/Alca ...

  3. 完整具体解释GCD系列（二）dispatch_after;dispatch_apply;dispatch_once

    原创Blog,转载请注明出处 本文阅读的过程中,如有概念不懂,请參照前专栏中之前的文章,假设还有疑惑,请留言. 这是我关于GCD专栏的地址 http://blog.csdn.net/column/de ...

  4. 通讯录C++console application

    #include<iostream> #include<fstream> #include<string> #include<cstring> #inc ...

  5. unity多边形uv地图

    我曾经写过一篇文章,不规则图形uv地图.(http://blog.csdn.net/itolfn/article/details/17240131)我用三角算法.但是,这种方法已经不完全,有一个指明: ...

  6. canvas绘制自定义的曲线，以椭圆为例，通俗易懂，童叟无欺

    本篇文章,将讲述如何通过自定义的曲线函数,使用canvas的方式进行曲线的绘制. 为了通俗易懂,将以大家熟悉的椭圆曲线为例,进行椭圆的绘制.至于其他比较复杂的曲线,用户只需通过数学方式建立起曲线函数, ...

  7. IISExpress配置文件

    ASP.NET MVC IISExpress配置文件的一个坑 现象: 昨天在处理PBS系统问题的时候意外发现两个js错误(而同样的代码在同事机器上都没有问题),如下图. 图1 图2 图3 原因分析: ...

  8. T-SQL: 17 个与日期时间相关的自定义函数(UDF),周日作为周的最后一天,均不受 @@DateFirst、语言版本影响!

    原文:T-SQL: 17 个与日期时间相关的自定义函数(UDF),周日作为周的最后一天,均不受 @@DateFirst.语言版本影响! CSDN 的 Blog 太滥了!无时不刻地在坏! 开始抢救性搬家 ...

  9. JavaScript的闭包特性

    闭包是一个比较抽象的概念,尤其是对js新手来说.在这里,我就我个人的理解j简单谈一下: 闭包:官方解释是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部 ...

  10. 安装SQL Server 2008 - 初学者系列 - 学习者系列文章

    本文介绍SQL Server 2008数据库的安装 1.从下列地址获取SQL Server 2008的副本 thunder://QUFlZDJrOi8vfGZpbGV8Y25fc3FsX3NlcnZl ...