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

基于jquery的全屏连续无限循环的横向滚动图片特效

jQuery插件 fishcity 1257浏览

这是一款基于jquery的超强插件carouFredSel,它可以实现极多不同的动画特效,只需配置不同的参数便可实现,简单易用。今天介绍这款主题是一款专用于产品展示的图片无限循环连续横向滚动效果,鼠标悬浮在产品上时,动画停止,并在下方显示产品的标题或是相关信息,效果可自适应该全屏,在下方有切换按,钮方便用户切换查看产品。

构建html

<div id="wrapper">
	<div id="carousel">
		<div>
			<img src="img/fruit1.png" alt="fruit1" width="200" height="200" />
			<span>Apple</span>
		</div>
		<div>
			<img src="img/fruit2.png" alt="fruit2" width="200" height="200" />
			<span>Mandarin</span>
		</div>
		<div>
			<img src="img/fruit3.png" alt="fruit3" width="200" height="200" />
			<span>Banannas</span>
		</div>
		<div>
			<img src="img/fruit4.png" alt="fruit4" width="200" height="200" />
			<span>Cherries</span>
		</div>
		<div>
			<img src="img/fruit5.png" alt="fruit5" width="200" height="200" />
			<span>Orange</span>
		</div>
		<div>
			<img src="img/fruit6.png" alt="fruit6" width="200" height="200" />
			<span>Melon</span>
		</div>
		<div>
			<img src="img/fruit7.png" alt="fruit7" width="200" height="200" />
			<span>Lemon</span>
		</div>
		<div>
			<img src="img/fruit8.png" alt="fruit8" width="200" height="200" />
			<span>Grapes</span>
		</div>
		<div>
			<img src="img/fruit9.png" alt="fruit9" width="200" height="200" />
			<span>Peach</span>
		</div>
		<div>
			<img src="img/fruit10.png" alt="fruit10" width="200" height="200" />
			<span>Pear</span>
		</div>
		<div>
			<img src="img/fruit11.png" alt="fruit11" width="200" height="200" />
			<span>Strawberry</span>
		</div>
		<div>
			<img src="img/fruit12.png" alt="fruit12" width="200" height="200" />
			<span>Melon</span>
		</div>
	</div>
	<div id="pager"></div>
</div>

写入CSS样式

html, body {
	height: 100%;
	padding: 0;
	margin: 0;
}
body {
	background-color: #ffe;
	position: relative;
	min-height: 300px;
}
body * {
	font-family: Arial, Geneva, SunSans-Regular, sans-serif;
	font-size: 14px;
	color: #333;
	line-height: 22px;
}
 
#wrapper {
	background-color: #fff;
	border-top: 1px solid #ccc;
	width: 100%;
	height: 350px;
	position: absolute;
	left: 0;
	bottom: 0;
}
#carousel {
	margin-top: -60px;
}
#carousel div {
	text-align: center;
	width: 125px;
	height: 140px;
	padding: 0 20px;
	float: left;
	position: relative;
}
#carousel div img {
	border: none;
	width: 100%;
	height: auto;
}
#carousel div span {
	display: none;
}
#carousel div:hover span,
#carousel div.hover span {
	background-color: #333;
	color: #fff;
	display: inline-block;
	width: 100px;
	padding: 2px 0;
	margin: 0 0 0 -50px;
	position: absolute;
	bottom: 0;
	left: 50%;
	border-radius: 3px;
}
#pager {
	text-align: center;
	padding-top: 20px;
}
#pager a {
	background: #ccc;
	display: inline-block;
	border-radius: 5px;
	width: 10px;
	height: 10px;
	margin: 0 2px;
}
#pager a.selected {
	background: #999;
}
#pager a:hover {
	background: #666;
}
#pager a span {
	display: none;
}

引入核心文件

<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() {
 
	$('#carousel').carouFredSel({
		width: '100%',
		items: {
			visible: 'odd+2'
		},
		scroll: {
			pauseOnHover: true,
			onBefore: function() {
				$(this).children().removeClass( 'hover' );
			}
		},
		auto: {
			items: 1,
			easing: 'linear',
			duration: 1250,
			timeoutDuration: 0
		},
		pagination: {
			container: '#pager',
			items: 1,
			duration: 0.5,
			queue: 'last',
			onAfter: function() {
				var cur = $(this).triggerHandler( 'currentVisible' ),
					mid = Math.floor( cur.length / 2 );
 
				cur.eq( mid ).addClass( 'hover' );
			}
		}
	});
 
});

完成以上工作,便可以实现这个美丽的产品图片展示效果了。

转载请注明:jQ酷 » 基于jquery的全屏连续无限循环的横向滚动图片特效

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