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

jquery插件之响应式画廊特效

jQuery插件 fishcity 794浏览

这是一款基于jquery的超强插件carouFredSel,它可以实现极多不同的动画特效,只需配置不同的参数便可实现,简单易用。今天这款主题一款很漂亮响应式画廊特效,底部有5个缩略图按钮,当前播放的或是选中的会自动切入到中间,其它的会向左或向右移动,开成了很漂亮的动画效。

构建html

<div id="wrapper">
	<div id="inner">
		<div id="carousel-wrapper">
			<div id="carousel">
				<img src="img/large/snow1.jpg" width="800" height="500" />
				<img src="img/large/snow2.jpg" width="800" height="500" />
				<img src="img/large/snow3.jpg" width="800" height="500" />
				<img src="img/large/snow4.jpg" width="800" height="500" />
				<img src="img/large/snow5.jpg" width="800" height="500" />
				<img src="img/large/snow6.jpg" width="800" height="500" />
				<img src="img/large/snow7.jpg" width="800" height="500" />
				<img src="img/large/snow8.jpg" width="800" height="500" />
				<img src="img/large/snow9.jpg" width="800" height="500" />
				<img src="img/large/snow10.jpg" width="800" height="500" />
				<img src="img/large/snow11.jpg" width="800" height="500" />
				<img src="img/large/snow12.jpg" width="800" height="500" />
				<img src="img/large/snow13.jpg" width="800" height="500" />
				<img src="img/large/snow14.jpg" width="800" height="500" />
				<img src="img/large/snow15.jpg" width="800" height="500" />
				<img src="img/large/snow16.jpg" width="800" height="500" />
			</div>
		</div>
		<div id="pager-wrapper">
			<div id="pager">
				<img src="img/small/snow1.jpg" width="80" height="80" />
				<img src="img/small/snow2.jpg" width="80" height="80" />
				<img src="img/small/snow3.jpg" width="80" height="80" />
				<img src="img/small/snow4.jpg" width="80" height="80" />
				<img src="img/small/snow5.jpg" width="80" height="80" />
				<img src="img/small/snow6.jpg" width="80" height="80" />
				<img src="img/small/snow7.jpg" width="80" height="80" />
				<img src="img/small/snow8.jpg" width="80" height="80" />
				<img src="img/small/snow9.jpg" width="80" height="80" />
				<img src="img/small/snow10.jpg" width="80" height="80" />
				<img src="img/small/snow11.jpg" width="80" height="80" />
				<img src="img/small/snow12.jpg" width="80" height="80" />
				<img src="img/small/snow13.jpg" width="80" height="80" />
				<img src="img/small/snow14.jpg" width="80" height="80" />
				<img src="img/small/snow15.jpg" width="80" height="80" />
				<img src="img/small/snow16.jpg" width="80" height="80" />
			</div>
		</div>
	</div>
</div>

写入CSS样式

html, body {
	height: 100%;
	padding: 0;
	margin: 0;
}
body {
	background: #fff;
	min-height: 600px;
}
body * {
	font-family: Arial, Geneva, SunSans-Regular, sans-serif;
	font-size: 14px;
	color: #333;
	line-height: 22px;
}
 
#wrapper {
	background: #f0ffff;
	border-bottom: 1px solid #ccc;
	height: 70%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
#inner {
	width: 60%;
	min-width: 300px;
	max-width: 800px;
	position: absolute;
	bottom: -50px;
	left: 20%;
}
#carousel-wrapper {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
 
	background: #fff;
	box-shadow: 0 3px 10px rgba(0,0,0,0.2);
	width: 100%;
	padding: 20px;
	position: absolute;
	bottom: 0;
	left: 0;
}
#carousel {
	width: 800px;
	height: 500px;
	overflow: hidden;
}
#carousel img {
	display: block;
	float: left;
}
#pager-wrapper {
	height: 120px;
	width: 100%;
	overflow: hidden;
	position: absolute;
	bottom: -35px;
	left: 0;
	z-index: 2;
}
#pager img {
	cursor: pointer;
	background: #fff;
	box-shadow: 0 2px 5px rgba(0,0,0,0.2);
	display: block;
	width: 80px;
	height: 80px;
	padding: 10px;
	margin: 10px;
	float: left;
}
#pager img:hover {
	background: #eff;
}
#pager img.selected {
	background: #dff;
}

引入核心库文件

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

写上JS调用插件

$(function() {
	var $carousel = $('#carousel'),
		$pager = $('#pager');
 
	function getCenterThumb() {
		var $visible = $pager.triggerHandler( 'currentVisible' ),
			center = Math.floor($visible.length / 2);
		
		return center;
	}
 
	$carousel.carouFredSel({
		responsive: true,
		items: {
			visible: 1,
			width: 800,
			height: (500/800*100) + '%'
		},
		scroll: {
			fx: 'crossfade',
			onBefore: function( data ) {
				var src = data.items.visible.first().attr( 'src' );
				src = src.split( '/large/' ).join( '/small/' );
 
				$pager.trigger( 'slideTo', [ 'img[src="'+ src +'"]', -getCenterThumb() ] );
				$pager.find( 'img' ).removeClass( 'selected' );
			},
			onAfter: function() {
				$pager.find( 'img' ).eq( getCenterThumb() ).addClass( 'selected' );
			}
		}
	});
	$pager.carouFredSel({
		width: '100%',
		auto: false,
		height: 120,
		items: {
			visible: 'odd'
		},
		onCreate: function() {
			var center = getCenterThumb();
			$pager.trigger( 'slideTo', [ -center, { duration: 0 } ] );
			$pager.find( 'img' ).eq( center ).addClass( 'selected' );
		}
	});
	$pager.find( 'img' ).click(function() {
		var src = $(this).attr( 'src' );
		src = src.split( '/small/' ).join( '/large/' );
		$carousel.trigger( 'slideTo', [ 'img[src="'+ src +'"]' ] );
	});
});

完成以上工作,便可实现这个jquery画廊效果了。

转载请注明:jQ酷 » jquery插件之响应式画廊特效

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