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

基于jquery的非常漂亮的圆形幻灯片特效

jQuery插件 fishcity 813浏览

这是一款基于jquery的超强插件carouFredSel,它可以实现极多不同的动画特效,只需配置不同的参数便可实现,简单易用。今天这款主题是一款非常漂亮的圆形焦点图效果,当前显示的大图是一个大圆形,其它图的缩略图则围在大圆的边上,点击缩略图进行切换,当然也可以自动切换。具体请看示例。

构建html

<div id="border"></div>
<div id="wrapper">
	<div id="carousel">
		<img src="img/toystory.jpg" width="250" height="250" />
		<img src="img/rat.jpg" width="250" height="250" />
		<img src="img/walle.jpg" width="250" height="250" />
		<img src="img/bugs.jpg" width="250" height="250" />
		<img src="img/incred.jpg" width="250" height="250" />
	</div>
</div>
<div id="pager"></div>

写入CSS样式

html, body {
	height: 100%;
	padding: 0;
	margin: 0;
}
body {
	background: #ccd;
	min-height: 600px;
}
body * {
	font-family: Arial, Geneva, SunSans-Regular, sans-serif;
	font-size: 14px;
	color: #333;
	line-height: 22px;
}
#border, #wrapper {
	border-radius: 200px;
	overflow: hidden;
	width: 250px;
	height: 250px;
	position: absolute;
	top: 50%;
	left: 50%;
}
#border {
	box-shadow: 0 5px 30px rgba(0,0,0,0.3);
	border: 25px solid #eee;
	margin: -165px 0 0 -150px;
	z-index: 0;
}
#wrapper {
	border: 10px solid #eee;
	margin: -150px 0 0 -135px;
	z-index: 2;
}
#carousel img {
	display: block;
	float: left;
}
 
#pager {
	width: 300px;
	margin: -15px 0 0 -150px;
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
}
#pager a {
	border: 5px solid #eee;
	border-radius: 30px;
	overflow: hidden;
	display: block;
	width: 50px;
	height: 50px;
	margin: 0 0 0 -30px;
	position: absolute;
	left: 50%;
	
	-webkit-transition: margin 0.5s ease;
	-moz-transition: margin 0.5s ease;
	transition: margin 0.5s ease;
}
#pager a.thumb1 {
	top: 45px;
	margin-left: -150px;
}
#pager a.thumb1.selected {
	margin-top: -20px;
	margin-left: -115px;
}
#pager a.thumb2 {
	top: 90px;
	margin-left: -98px;
}
#pager a.thumb2.selected {
	margin-top: -35px;
	margin-left: -85px;
}
#pager a.thumb3 {
	top: 110px;
}
#pager a.thumb3.selected {
	margin-top: -40px;
}
#pager a.thumb4 {
	top: 90px;
	margin-left: 38px;
}
#pager a.thumb4.selected {
	margin-top: -35px;
	margin-left: 25px;
}
#pager a.thumb5 {
	top: 45px;
	margin-left: 90px;
}
#pager a.thumb5.selected {
	margin-top: -20px;
	margin-left: 55px;
}

引入核心文件

<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() {
	$('#carousel').carouFredSel({
		direction: 'up',
		items: 1,
		scroll: {
			fx: 'directscroll'
		},
		pagination: {
			container: '#pager',
			anchorBuilder: function( nr ) {
				return '<a href="#" class="thumb' + nr + '"><img src="' + this.src + '" width="50" /></a>';
			}
		}
	});
});

好了,整个工作已完成,打开浏览器测试下这漂亮有个性的圆形幻灯片效果吧。

转载请注明:jQ酷 » 基于jquery的非常漂亮的圆形幻灯片特效

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