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

基于jquery的carouFredSel插件之超酷的缩略图按钮焦点图

jQuery插件 fishcity 827浏览

这是一款基于jquery的超强插件carouFredSel,它可以实现极多不同的动画特效,只需配置不同的参数便可实现,简单易用,今天jQ酷将不断的推出此插件的不同特主题效果。现在让我们来看下基于jquery的carouFredSel插件之超酷的缩略图按钮焦点图的展示特效吧,因为官方文档较少,而小编的时间很紧张,所以代码方面不多解释。

创建html

<div id="wrapper">
	<div id="carousel">
		<img src="img/large/sp-die-hard.jpg" alt="Die Hard" width="700" height="525"/ >
		<img src="img/large/sp-fat-red-line.jpg" alt="Fat Red Line" width="700" height="525" />
		<img src="img/large/sp-resevoir-dogs.jpg" alt="Resevoir Dogs" width="700" height="525" />
		<img src="img/large/sp-fatrix.jpg" alt="The Fatrix" width="700" height="525" />
		<img src="img/large/sp-colorado-is-not-enough.jpg" alt="Colorado Is Not Enough" width="700" height="525" />
	</div>
	<a href="#" title="Go to the previous image." id="prev"></a>
	<a href="#" title="Go to the next image." id="next"></a>
	<div id="navi">
		<p id="pagenumber">Now showing image <span></span> of 5.</p>
		<p id="title"></p>
		<p id="pager">Go to image <span></span></p>
	</div>
</div>

写入CSS

html, body {
	height: 100%;
	padding: 0;
	margin: 0;
}
body {
	min-height: 650px;
}
body * {
	font-family: Arial, Geneva, SunSans-Regular, sans-serif;
	font-size: 14px;
	color: #333;
	line-height: 22px;
}
#wrapper {
	border: 1px solid #ddd;
	background-color: #fff;
	width: 740px;
	height: 600px;
	margin: -300px 0 0 -370px;
	position: absolute;
	top: 50%;
	left: 50%;
	
	box-shadow: 0 0 20px rgba(0, 0, 0, .3);
}
#carousel {
	width: 700px;
	height: 525px;
	margin: 20px 0 0 20px;
	overflow: hidden;
}
#carousel img {
	display: block;
	float: left;
}
#prev, #next {
	display: block;
	width: 350px;
	height: 525px;
	position: absolute;
	top: 20px;
}
#prev img, #next img {
	background: url(img/thumb-bgs.png) 0 0 no-repeat transparent;
	display: none;
	padding: 15px;
	position: absolute;
	top: 200px;
}
#prev:hover img, #next:hover img {
	display: block;
}
#prev {
	left: 20px;
}
#next {
	right: 20px;
}
#prev img {
	background-position: 0 -230px;
	padding-left: 25px;
	left: 0;
}
#next img {
	background-position: 0 -115px;
	padding-right: 25px;
	right: 0;
}
#wrapper:hover #prev, #wrapper:hover #next {
	display: block !important;
}
#navi {
	width: 660px;
	margin: 15px 0 0 40px;
}
#pagenumber, #title, #pager {
	margin: 0;
	padding: 0;
}
#pagenumber {
	width: 200px;
	float: left;
}
#title {
	font-size: 18px;
	text-align: center;
	width: 260px;
	float: left;
}
#pager {
	text-align: right;
	width: 200px;
	float: right;
}
#pager a {
	text-decoration: none;
	text-align: center;
	line-height: 20px;
	display: inline-block;
	width: 18px;
	height: 20px;
	position: relative;
}
#pager a.selected {
	background-color: #666;
	color: #fff;
}
#pager a img {
	background: url(img/thumb-bgs.png) 0 0 no-repeat transparent;
	padding: 15px 15px 25px 15px;
	display: none;
	position: absolute;
	bottom: 20px;
	left: -57px;
}
#pager a:hover img {
	display: block;
}

引入核心库

<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 setNavi( $c, $i ) {
	var title = $i.attr( 'alt' );
	$('#title').text( title );
 
	var current = $c.triggerHandler( 'currentPosition' );
	$('#pagenumber span').text( current+1 );
 
	var $prev = ($i.is(':first-child')) ? $c.children().last() : $i.prev();
	var small = $prev.attr('src').split('/large/').join('/small/');
	$('#prev').html('<img src="'+small+'" />');
 
	var $next = $i.next();
	var small = $next.attr('src').split('/large/').join('/small/');
	$('#next').html('<img src="'+small+'" />');
}
$(function() {
	$("#carousel").carouFredSel({
		items: 1,
		prev: '#prev',
		next: '#next',
		pagination: {
			container: '#pager span',
			anchorBuilder: function( nr ) {
				var small = $(this).attr('src').split('/large/').join('/small/');
				return '<a href="#" title="Go to image '+nr+'.">'+nr+'<img src="'+small+'" /></a>';
			}
		},
		scroll: {
			onBefore: function( data ) {
				setNavi( $(this), data.items.visible );
			}
		},
		onCreate: function( data ) {
			setNavi( $(this), data.items );
		}
	});
});

OK,完成以上工作,便可以实现cool的缩略图按钮的焦点图

转载请注明:jQ酷 » 基于jquery的carouFredSel插件之超酷的缩略图按钮焦点图

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