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

基于jquery的华丽多组图焦点图特效

jQuery插件 fishcity 731浏览

这是一款基于jquery的超强插件carouFredSel,它可以实现极多不同的动画特效,只需配置不同的参数便可实现,简单易用。这款主题是一款非常棒的多组图幻灯片特效,它可把图片分成多组,每一组可多个图片,按图片的缩略图时可动感的切换图片,当按最右边的箭头按钮时,便可切换至下一组图片,非常实用且华丽动感,做相册或图片的朋友有福了。

构建html

<div id="wrapper">
	<div id="big">
		<div class="carousel">
			<img src="img/big/car1-a.jpg" width="900" height="450" />
			<img src="img/big/car1-b.jpg" width="900" height="450" />
			<img src="img/big/car1-c.jpg" width="900" height="450" />
			<img src="img/big/car1-d.jpg" width="900" height="450" />
			<img src="img/big/car2-a.jpg" width="900" height="450" />
			<img src="img/big/car2-b.jpg" width="900" height="450" />
			<img src="img/big/car2-c.jpg" width="900" height="450" />
			<img src="img/big/car3-a.jpg" width="900" height="450" />
			<img src="img/big/car3-b.jpg" width="900" height="450" />
		</div>
	</div>
	<div id="small">
		<div class="carousel">
			<img src="img/small/car1-a.jpg" width="100" height="100" />
			<img src="img/small/car1-b.jpg" width="100" height="100" />
			<img src="img/small/car1-c.jpg" width="100" height="100" />
			<img src="img/small/car1-d.jpg" width="100" height="100" />
			<img src="img/small/car2-a.jpg" width="100" height="100" />
			<img src="img/small/car2-b.jpg" width="100" height="100" />
			<img src="img/small/car2-c.jpg" width="100" height="100" />
			<img src="img/small/car3-a.jpg" width="100" height="100" />
			<img src="img/small/car3-b.jpg" width="100" height="100" />
		</div>
		<a id="next" href="#">&rsaquo;</a>
	</div>
</div>

写入CSS样式

html, body {
	height: 100%;
	padding: 0;
	margin: 0;
}
body {
	background: #f9f9f3;
	min-height: 600px;
}
body * {
	font-family: Arial, Geneva, SunSans-Regular, sans-serif;
	font-size: 14px;
	color: #666;
	line-height: 22px;
}
 
#wrapper {
	background: #ddd;
	width: 900px;
	height: 450px;
	padding: 10px;
	margin: -235px 0 0 -460px;
	position: absolute;
	top: 50%;
	left: 50%;
}
 
#big {
	width: 900px;
	height: 450px;
	overflow: hidden;
}
#big img {
	display: block;
}
 
#small {
	width: 900px;
	height: 140px;
	overflow: hidden;
	position: absolute;
	bottom: 10px;
	left: 10px;
}
#small .carousel {
	float: left;
}
#small img,
#next {
	background: rgba( 255, 255, 255, 0.2 );
	display: block;
	width: 100px;
	height: 100px;
	padding: 10px;
	margin: 0 0 20px 20px;
	float: left;
	
	-webkit-transition: background 0.6s ease;
	-moz-transition: background 0.6s ease;
	transition: background 0.6s ease;
}
#small img:hover,
#next:hover {
	background: rgba( 255, 255, 255, 0.3 );
}
#next {
	color: rgba( 0, 0, 0, 0.5 );
	font-size: 120px;
	line-height: 85px;
	text-align: center;
	text-decoration: none;
}
 
.carousel:after {
	content: "";
	display: block;
	clear: both;
}

引入核心库文件

<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>

写入JS调用插件

$(function() {
	var $big = $('#big .carousel'),
		$small = $('#small .carousel');
 
	$big.carouFredSel({
		auto: false,
		direction: 'up',
		scroll: {
			items: 1,
			duration: 300
		},
		prev: {
			duration: 'auto'
		},
		next: {
			duration: 'auto'
		}
	});
	
	$small.carouFredSel({
		align: 'left',
		width: 'variable',
		auto: false,
		items:  4,
		scroll: {
			items: 'variable',
			duration: 300,
			onBefore: function( data ) {
				var src = data.items.visible.first().attr( 'src' ).split( '/small/' )[ 1 ];
				$big.trigger( 'slideTo', [ '[src$="' + src + '"]', { 
					fx: 'directscroll',
					duration: 300
				} ] );
			}
		}
	});
 
	$('#small img')
		.css( 'cursor', 'pointer' )
		.click(function() {
			if ( $big.triggerHandler( 'isScrolling' ) ) {
				return false;
			}
			var src = $(this).attr( 'src' ).split( '/small/' )[ 1 ];
			$big.trigger( 'slideTo', [ '[src$="' + src + '"]' ] );
 
			return false;
		});
 
	$('#next').click(function() {
 
		if ( $small.triggerHandler( 'isScrolling' ) ) {
			return false;
		}
		var $visible = $small.triggerHandler( 'currentVisible' ),
			$next = $visible.last().next(),
			$new = $small.find( '[src^="' + $next.attr( 'src' ).split( '-' )[ 0 ] + '"]' );
 
		$small.trigger( 'configuration', [{
			items: {
				visible: $new.length
			}
		}, false] );
		$small.trigger( 'next', [ $visible.length ] );
 
		return false;
	});
});

完成以上工作,便可实现华丽动感的幻灯片效果!

转载请注明:jQ酷 » 基于jquery的华丽多组图焦点图特效

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