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

基于jquery的3D切换幻灯片特效

jQuery插件 fishcity 788浏览

这是一款基于jquery的超强插件carouFredSel,它可以实现极多不同的动画特效,只需配置不同的参数便可实现,简单易用。今天介绍这款主题是一款3D循环切换的幻灯片果效,它同时显示三幅图片,一张在前两张在后,插件通过改变图片的大小与图层的显示位置,达到了3D的切换效果。

构建html

<div id="wrapper">
	<div id="carousel">
		<img src="img/fireworks1.jpg" width="600" height="400" />
		<img src="img/fireworks2.jpg" width="600" height="400" />
		<img src="img/fireworks3.jpg" width="600" height="400" />
		<img src="img/fireworks4.jpg" width="600" height="400" />
		<img src="img/fireworks5.jpg" width="600" height="400" />
	</div>
</div>

写入CSS样式

html, body {
	height: 100%;
	padding: 0;
	margin: 0;
}
body {
	min-height: 500px;
	background-color: #f6f6e6;
}
body * {
	font-family: Arial, Geneva, SunSans-Regular, sans-serif;
	font-size: 14px;
	color: #333;
	line-height: 22px;
}
#wrapper {
	width: 900px;
	height: 400px;
	margin: -200px 0 0 -450px;
	position: absolute;
	top: 50%;
	left: 50%;
}
#carousel img {
	display: block;
	float: left;
	border: none;
	position: relative;
}

引入核心库文件

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

写入JS调用插件,实现效果。

$(function() {
	var _center = {
		width: 600,
		height: 400,
		marginLeft: 0,
		marginTop: 0,
		marginRight: 0
	};
	var _left = {
		width: 300,
		height: 200,
		marginLeft: 0,
		marginTop: 150,
		marginRight: -150
	};
	var _right = {
		width: 300,
		height: 200,
		marginLeft: -150,
		marginTop: 150,
		marginRight: 0
	};
	var _outLeft = {
		width: 150,
		height: 100,
		marginLeft: 150,
		marginTop: 200,
		marginRight: -200
	};
	var _outRight = {
		width: 150,
		height: 100,
		marginLeft: -200,
		marginTop: 200,
		marginRight: 50
	};
	$('#carousel').carouFredSel({
		width: 900,
		height: 400,
		align: false,
		items: {
			visible: 3,
			width: 100
		},
		scroll: {
			items: 1,
			duration: 400,
			onBefore: function( data ) {
				data.items.old.eq( 0 ).animate(_outLeft);
				data.items.visible.eq( 0 ).animate(_left);
				data.items.visible.eq( 1 ).animate(_center);
				data.items.visible.eq( 2 ).animate(_right).css({ zIndex: 1 });
				data.items.visible.eq( 2 ).next().css(_outRight).css({ zIndex: 0 });
 
				setTimeout(function() {
					data.items.old.eq( 0 ).css({ zIndex: 1 });
					data.items.visible.eq( 0 ).css({ zIndex: 2 });
					data.items.visible.eq( 1 ).css({ zIndex: 3 });
					data.items.visible.eq( 2 ).css({ zIndex: 2 });
				}, 200);
			}
		}
	});
	$('#carousel').children().eq( 0 ).css(_left).css({ zIndex: 2 });
	$('#carousel').children().eq( 1 ).css(_center).css({ zIndex: 3 });
	$('#carousel').children().eq( 2 ).css(_right).css({ zIndex: 2 });
	$('#carousel').children().eq( 3 ).css(_outRight).css({ zIndex: 1 });
});

完成以上工作,便可实现了3D循环切换的幻灯片效果了。

转载请注明:jQ酷 » 基于jquery的3D切换幻灯片特效

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