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

很酷的基于jquery的幻灯片效果

jQuery插件 fishcity 610浏览

这是一款基于jquery的超强插件carouFredSel,它可以实现极多不同的动画特效,只需配置不同的参数便可实现,简单易用。今天介绍这款主题是一款很酷的幻灯片特效,它只有一个下一张图片的按钮,而在右边可以预览到下一张图片的小部份,有一种截断的感觉。

构建html

<div id="wrapper">
	<div id="carousel">
		<img src="img/stan.jpg" width="700" height="525"/ >
		<img src="img/francine.jpg" width="700" height="525" />
		<img src="img/roger.jpg" width="700" height="525" />
		<img src="img/hayley.jpg" width="700" height="525" />
		<img src="img/steve.jpg" width="700" height="525" />
		<img src="img/klaus.jpg" width="700" height="525" />
	</div>
	<a id="next" href="#"></a>
</div>

写入CSS样式

html, body {
	height: 100%;
	padding: 0;
	margin: 0;
}
body {
	background-color: #eee;
	min-height: 600px;
}
body * {
	font-family: Arial, Geneva, SunSans-Regular, sans-serif;
	font-size: 14px;
	color: #333;
	line-height: 22px;
}
 
#wrapper {
	background-color: #fff;
	width: 800px;
	height: 525px;
	padding: 10px;
	margin: -265px 0 0 -410px;
	position: absolute;
	top: 50%;
	left: 50%;
	box-shadow: 0 0 10px #666;
}
#carousel {
	width: 800px;
	height: 525px;
	overflow: hidden;
}
#carousel img {
	border: none;
	display: block;
	margin-left: -300px;
	float: left;
	position: relative;
	z-index: 0;
	box-shadow: 0 0 10px #333;
}
#next {
	background: url( img/gui-next.png ) center center no-repeat #999;
	display: block;
	width: 100px;
	height: 525px;
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 5;
	opacity: 0.1;
 
	-o-transition: opacity 1s ease;
	-ms-transition: opacity 1s ease;
	-moz-transition: opacity 1s ease;
	-webkit-transition: opacity 1s ease;
	transition: opacity 1s ease;
}
#next:hover {
	opacity: 0.5;
}

引入核心库文件

<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() {
	$('#carousel').carouFredSel({
		width: 800,
		align: false,
		items: {
			visible: 1,
			width: 700
		},
		auto: false,
		next: '#next',
		scroll: {
			onBefore: function( data ) {
				data.items.visible.animate({
					'marginLeft': 0
				}, data.scroll.duration);
			},
			onAfter: function( data ) {
				data.items.old.css({
					'zIndex': 0,
					'marginLeft': -300
				});
				data.items.visible.css( 'zIndex', 2 );
				data.items.visible.next().css( 'zIndex', 1 );
			}
		},
		onCreate: function( data ) {
			data.items.css({
				'marginLeft': 0,
				'zIndex': 2
			});
			data.items.next().css( 'zIndex', 1 );
		}
	});
});

完成以上工作,便可以实酷且美丽的幻灯片效果了。

转载请注明:jQ酷 » 很酷的基于jquery的幻灯片效果

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