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

可按类别分组滚动的jquery图片滚动效果

jQuery插件 fishcity 849浏览

这是一款基于jquery的超强插件carouFredSel,它可以实现极多不同的动画特效,只需配置不同的参数便可实现,简单易用。今天介绍这款主题是一款很实用也很漂亮的jquery图片滚动插件,它可以把图片按类别分组,根据组别来切换图片,效果很棒,用来做产品展示是相当不错的,具体效果请看实例。

构建html

<div id="wrapper">
	<div id="inner">
		<div id="carousel">
			<div class="jeans" id="jeans">
				<img src="img/jeans1.jpg" width="140" height="200" />
				<em>Jeans 1</em>
			</div>
			<div class="jeans">
				<img src="img/jeans2.jpg" width="140" height="200" />
				<em>Jeans 2</em>
			</div>
			<div class="jeans">
				<img src="img/jeans3.jpg" width="140" height="200" />
				<em>Jeans 3</em>
			</div>
			<div class="shirts" id="shirts">
				<img src="img/shirt1.jpg" width="140" height="200" />
				<em>Shirt 1</em>
			</div>
			<div class="shirts">
				<img src="img/shirt2.jpg" width="140" height="200" />
				<em>Shirt 2</em>
			</div>
			<div class="shirts">
				<img src="img/shirt3.jpg" width="140" height="200" />
				<em>Shirt 3</em>
			</div>
			<div class="shirts">
				<img src="img/shirt4.jpg" width="140" height="200" />
				<em>Shirt 4</em>
			</div>
			<div class="shirts">
				<img src="img/shirt5.jpg" width="140" height="200" />
				<em>Shirt 5</em>
			</div>
			<div class="shirts">
				<img src="img/shirt6.jpg" width="140" height="200" />
				<em>Shirt 6</em>
			</div>
			<div class="shoes" id="shoes">
				<img src="img/shoes1.jpg" width="140" height="200" />
				<em>Shoes 1</em>
			</div>
			<div class="shoes">
				<img src="img/shoes2.jpg" width="140" height="200" />
				<em>Shoes 2</em>
			</div>
			<div class="jackets" id="jackets">
				<img src="img/jacket1.jpg" width="140" height="200" />
				<em>Jacket 1</em>
			</div>
			<div class="jackets">
				<img src="img/jacket2.jpg" width="140" height="200" />
				<em>Jacket 2</em>
			</div>
			<div class="jackets">
				<img src="img/jacket3.jpg" width="140" height="200" />
				<em>Jacket 3</em>
			</div>
		</div>
		<div id="pager">
			<strong>Choose a category:</strong> &nbsp;
			<a href="#jeans">Jeans</a> &bull;
			<a href="#shirts">Shirts</a> &bull;
			<a href="#shoes">Shoes</a> &bull;
			<a href="#jackets">Jackets</a>
		</div>
		<a href="#" id="prev"></a>
		<a href="#" id="next"></a>
	</div>
</div>

请注意html代码中分类的部份,它是用class属性来区分类别的,而在每个图片后的<em>标签刚是用来显示标题的。

写入CSS样式

html, body {
	height: 100%;
	padding: 0;
	margin: 0;
}
body {
	background-color: #fff;
	min-height: 400px;
}
body * {
	font-family: Arial, Geneva, SunSans-Regular, sans-serif;
	font-size: 14px;
	color: #333;
	line-height: 22px;
}
body h3 {
	font-size: 20px;
	margin: 30px 0 10px 0;
}
body a:hover {
	color: #000;
}
 
#wrapper {
	background-color: #ccc;
	width: 100%;
	height: 55%;
	min-height: 275px;
	margin: -150px 0 0 0;
	position: absolute;
	bottom: 0;
	left: 0;
}
#inner {
	width: 100%;
	height: 300px;
	margin-top: -75px;
	position: relative;
	overflow: hidden;
}
#carousel div {
	border: 1px solid #999;
	background: #fff;
	width: 140px;
	height: 230px;
	float: left;
	padding: 10px;
	margin: 0 5px;
}
#pager {
	text-align: center;
	margin-top: 20px;
	color: #666;
}
#pager a {
	color: #666;
	text-decoration: none;
	display: inline-block;
	padding: 5px 10px;
}
#pager a:hover {
	color: #333;
}
#pager a.selected {
	background-color: #333;
	color: #ccc;
}
#prev, #next {
	display: block;
	width: 50px;
	height: 80px;
	margin-top: -40px;
	position: absolute;
	top: 50%;
	z-index: 2;
}
#prev {
	background: url( img/ui-prev.png ) no-repeat;
	left: 50%;
	margin-left: -520px;
}
#next {
	background: url( img/ui-next.png ) no-repeat;
	right: 50%;
	margin-right: -520px;
}
#copy {
	text-align: center;
	width: 100%;
	position: absolute;
	bottom: 10px;
	left: 0;
}
#copy, #copy a {
	color: #999;
}

引入核心库文件

<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 _visible = 5;
	var $pagers = $('#pager a');
	var _onBefore = function() {
		$(this).find('img').stop().fadeTo( 300, 1 );
		$pagers.removeClass( 'selected' );
	};
 
	$('#carousel').carouFredSel({
		items: _visible,
		width: '100%',
		auto: false,
		scroll: {
			duration: 750
		},
		prev: {
			button: '#prev',
			items: 2,
			onBefore: _onBefore
		},
		next: {
			button: '#next',
			items: 2,
			onBefore: _onBefore
		},
	});
 
	$pagers.click(function( e ) {
		e.preventDefault();
		
		var group = $(this).attr( 'href' ).slice( 1 );
		var slides = $('#carousel div.' + group);
		var deviation = Math.floor( ( _visible - slides.length ) / 2 );
		if ( deviation < 0 ) {
			deviation = 0;
		}
 
		$('#carousel').trigger( 'slideTo', [ $('#' + group), -deviation ] );
		$('#carousel div img').stop().fadeTo( 300, 0.3 );
		slides.find('img').stop().fadeTo( 300, 1 );
 
		$(this).addClass( 'selected' );
	});
});

完成以上工作,便可实现产品展示的图片滚动特效。

转载请注明:jQ酷 » 可按类别分组滚动的jquery图片滚动效果

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