jQuery图片切换插件jquery.cycle.js

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




评论 1 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:书香水墨 设计师:CSDN官方博客 返回首页

打赏作者

麦田

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值