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

基于jquery的全屏响应式图片滚动特效

jQuery插件 fishcity 867浏览

这是一款基于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>

写入CSS样式

html, body {
	height: 100%;
	padding: 0;
	margin: 0;
}
body {
	background-color: #fff;
	position: relative;
	min-height: 400px;
}
body * {
	font-family: Arial, Geneva, SunSans-Regular, sans-serif;
	font-size: 14px;
	color: #333;
	line-height: 22px;
}
body h3 {
	font-family: Arial, Geneva, SunSans-Regular, sans-serif;
	font-size: 20px;
	text-align: center;
	color: #999;
	margin: 0;
	padding-top: 50px;
}
 
#wrapper {
	border-top: 1px solid #cdc;
	border-bottom: 1px solid #cdc;
	background-color: #efe;
	width: 100%;
	height: 240px;
	margin: -100px 0 0 0;
	position: absolute;
	top: 50%;
	left: 0;
}
#carousel div {
	text-align: center;
	width: 300px;
	height: 220px;
	float: left;
	position: relative;
}
#carousel div img {
	border: none;
}
#carousel div span {
	text-align: center;
	color: #333;
	font-family: Arial, Geneva, SunSans-Regular, sans-serif;
	font-size: 14px;
	font-weight: bold;
	display: block;
	margin-top: -20px;
}

引入核心文件

<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({
		responsive: true,
		scroll: 1,
		items: {
			width: 300,
			visible: {
				min: 3,
				max: 10
			}
		}
	});
 
});

完成以上工作,恭喜你可以打开浏览测试下效果了。

转载请注明:jQ酷 » 基于jquery的全屏响应式图片滚动特效

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