注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

基于jquery的carouFredSel插件之水平垂直居中的幻灯片特效

jQuery插件 fishcity 1047浏览

这是一款基于jquery的超强插件carouFredSel,它可以实现极多不同的动画特效,只需配置不同的参数便可实现,简单易用。今天的主题是一款让图片水平和垂直都居中的幻灯片展示特效,想找图片居中的朋友有福了,它不但可以让图片居中显示,还可以动画展示图片,可以说这个是不错的图片画廊.

构建html

<div id="outer">
	<div id="inner">
		<div id="carousel">
			<img src="img/snow1.jpg" width="400" height="300" />
			<img src="img/snow2.jpg" width="400" height="200" />
			<img src="img/snow3.jpg" width="300" height="400" />
			<img src="img/snow4.jpg" width="300" height="300" />
			<img src="img/snow5.jpg" width="200" height="400" />
			<img src="img/snow6.jpg" width="400" height="300" />
		</div>
	</div>
</div>

写入CSS样式

html, body {
	height: 100%;
	padding: 0;
	margin: 0;
}
body {
	background: #777;
}
body * {
	font-family: Arial, Geneva, SunSans-Regular, sans-serif;
	font-size: 14px;
	color: #222;
	line-height: 20px;
}
 
#outer {
	width: 100%;
	height: 100%;
	min-width: 700px;
	min-height: 600px;
	position: relative;
}
#inner {
	box-shadow: 0 0 10px #555;
	background: #ccc;
	width: 700px;
	height: 420px;
	padding: 50px 0;
	margin: -260px 0 0 -350px;
	overflow: hidden;
	position: absolute;
	top: 50%;
	left: 50%;
}
#carousel img {
	box-shadow: 0 0 10px #999;
	border: 10px solid #fff;
	display: block;
	margin: 0 20px;
	float: left;
}

引入核心文件

<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="js/jquery.carouFredSel-6.2.0-packed.js" type="text/javascript"></script>

写入javascript调用插件

$(function() {
	$('#carousel').carouFredSel({
		width: 700,
		height: 420,
		items: 1,
		scroll: {
			duration: 750,
			timeoutDuration: 1250
		}
 
	}).children().each(function() {
		$(this).css('marginTop', ( 420 - $(this).outerHeight() ) / 2 );
	});
});

完成以上工作,便可实现了图片居中的幻灯片特效。

转载请注明:jQ酷 » 基于jquery的carouFredSel插件之水平垂直居中的幻灯片特效

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。