jquery图片相册插件js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery图片相册插件js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery图片相册插件</title>
<link rel="stylesheet" href="DB_gallery.css" type="text/css"></link>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> 
<script type="text/javascript" src="js/jquery.DB_gallery.js"></script>
</head>
<body>
<center>
<h3>jquery图片相册插件</h3>
<div id="DB_gallery">

	<div class="DB_imgSet">

		<div class="DB_imgWin"><img src="img/img1.jpg" alt=""/></div>

		<div class="DB_page"><span class="DB_current">0</span>-<span class="DB_total">0</span></div>

		<div class="DB_prevBtn"><img src="img/prev_off.png" alt="jquery相册"/></div>

		<div class="DB_nextBtn"><img src="img/next_off.png" alt="图片相册"/></div>

	</div>

	<div class="DB_thumSet">

		<ul class="DB_thumMove">

			<li><a href="img/img1.jpg"><img src="img/thum1.jpg" alt="图片相册"/></a></li>

			<li><a href="img/img2.jpg"><img src="img/thum2.jpg" alt="jquery相册"/></a></li>

			<li><a href="img/img3.jpg"><img src="img/thum3.jpg" alt="图片相册"/></a></li>

			<li><a href="img/img4.jpg"><img src="img/thum4.jpg" alt="jquery相册"/></a></li>

			<li><a href="img/img5.jpg"><img src="img/thum5.jpg" alt="图片相册"/></a></li>

			<li><a href="img/img6.jpg"><img src="img/thum6.jpg" alt="#"/></a></li>

			<li><a href="img/img1.jpg"><img src="img/thum1.jpg" alt="jquery相册"/></a></li>

			<li><a href="img/img2.jpg"><img src="img/thum2.jpg" alt=""/></a></li>

			<li><a href="img/img3.jpg"><img src="img/thum3.jpg" alt=""/></a></li>

			<li><a href="img/img4.jpg"><img src="img/thum4.jpg" alt=""/></a></li>

			<li><a href="img/img5.jpg"><img src="img/thum5.jpg" alt="网页特效"/></a></li>

			<li><a href="img/img6.jpg"><img src="img/thum6.jpg" alt=""/></a></li>

		</ul>

		<div class="DB_thumLine"></div>

		<div class="DB_prevPageBtn"><img src="img/prev_page.png" alt="上一页"/></div>

		<div class="DB_nextPageBtn"><img src="img/next_page.png" alt="下一页"/></div>
	</div>
</div>
<script type="text/javascript">

	$('#DB_gallery').DB_gallery({

		thumWidth:110,            

		thumGap:8,                

		thumMoveStep:4,           

		moveSpeed:300,            

		fadeSpeed:500            

	});
</script>
</center>
</body>
</html>

JS代码(jquery.DB_gallery.js):

/*********************************************************************************�÷�����:jquery.DB_gallery.js������:Copyright �� 2012 by �����κ��(http://designblack.com)���̼���:�����ζ��̼�����Ÿ:�� �÷����� ������ ����(�ּ�)�� ������ �� �����ϴ�. Ȩ�������� ���� �̿뵵������ ���� �޾ƾ� �մϴ�.*********************************************************************************/
;
	(function($){
	$.fn.DB_gallery=function(options){
	var opt={
	thumWidth:110,//����ϰ���thumGap:8,//����ϰ���thumMoveStep:5,//������̵�����moveSpeed:300,//�̵��ӵ�fadeSpeed:300,//ȭ����ȯ�ӵ�end:''}
$.extend(opt,options);
	return this.each(function(){
	var $this=$(this);
	var $imgSet=$this.find('.DB_imgSet');
	var $imgWin=$imgSet.find('.DB_imgWin');
	var $page=$this.find('.DB_page');
	var $pageCurrent=$page.find('.DB_current');
	var $pageTotal=$page.find('.DB_total');
	var $thumSet=$this.find('.DB_thumSet');
	var $thumMove=$thumSet.find('.DB_thumMove');
	var $thumList=$thumMove.find('li');
	var $thumLine=$this.find('.DB_thumLine');
	var $nextBtn=$this.find('.DB_nextBtn');
	var $prevBtn=$this.find('.DB_prevBtn');
	var $nextPageBtn=$this.find('.DB_nextPageBtn');
	var $prevPageBtn=$this.find('.DB_prevPageBtn');
	var objNum=$thumList.length;
	var currentObj=0;
	var fixObj=0;
	var currentPage=0;
	var totalPage=Math.floor(objNum/opt.thumMoveStep);
	var oldImg;
	init();
	function init(){
	setInit();
	setMouseEvent();
	changeImg();
}
function setInit(){
	//����� ���� ��ġ����$thumMove.append($thumLine.get())}
//���ε�function setMouseEvent(){
	$thumList.bind('click',function(e){
	e.preventDefault();
	currentObj=$(this).index();
	changeImg();
}
);
	$nextBtn.bind('click',function(){
	currentObj++;
	changeImg();
	currentPage=Math.floor(currentObj/opt.thumMoveStep);
	moveThum();
}
);
	$prevBtn.bind('click',function(){
	currentObj--;
	changeImg();
	currentPage=Math.floor(currentObj/opt.thumMoveStep);
	moveThum();
}
);
	$nextPageBtn.bind('click',function(){
	currentPage++;
	moveThum();
}
);
	$prevPageBtn.bind('click',function(){
	currentPage--;
	moveThum();
}
);
}
//����� �̵�function moveThum(){
	var pos=((opt.thumWidth+opt.thumGap)*opt.thumMoveStep)*currentPage$thumMove.animate({
	'left':-pos}
,opt.moveSpeed);
	//setVisibleBtn();
}
//�̹������濡 ���� ��ưó��function setVisibleBtn(){
	$prevPageBtn.show();
	$nextPageBtn.show();
	$prevBtn.show();
	$nextBtn.show();
	if(currentPage==0)$prevPageBtn.hide();
	if(currentPage==totalPage-1)$nextPageBtn.hide();
	if(currentObj==0)$prevBtn.hide();
	if(currentObj==objNum-1)$nextBtn.hide();
}
//�̹�������function changeImg(){
	if(oldImg!=null){
	//�ε巯�� ��ȯ�� ���� ��濡 �����̹����� ��ġ$imgWin.css('background','url('+oldImg+') no-repeat');
}
//Ŭ���̹���var $thum=$thumList.eq(currentObj)var _src=oldImg=$thum.find('a').attr('href');
	$imgWin.find('img').hide().attr('src',_src).fadeIn(opt.fadeSpeed);
	oldImg=_src//����϶��� ��ġ����$thumLine.css({
	'left':$thum.position().left}
)//����������$pageCurrent.text(currentObj+1);
	$pageTotal.text(objNum);
	setVisibleBtn();
}
}
)}
}
)(jQuery)

CSS代码(DB_gallery.css):

/*http://www.kaiwo123.com*/
#DB_gallery ul,#DB_gallery li{list-style:none;margin:0;padding:0}
#DB_gallery img{border:none;vertical-align:top;}
#DB_gallery .DB_imgSet{position:relative;width:580px;height:387px;overflow:hidden;}
#DB_gallery .DB_imgSet .DB_imgWin{height:100%}
#DB_gallery .DB_imgSet .DB_page{position:absolute;bottom:0;font:11px tahoma bold;padding:5px;color:#ffffff}
#DB_gallery .DB_imgSet .DB_page .DB_current{color:#ffff00}
#DB_gallery .DB_imgSet .DB_page .DB_total{color:#ffcc00}
#DB_gallery .DB_imgSet .DB_prevBtn{position:absolute;top:50%;margin-top:-45px;cursor:pointer;left:0;}
#DB_gallery .DB_imgSet .DB_nextBtn{position:absolute;top:50%;margin-top:-45px;cursor:pointer;right:0;}
#DB_gallery .DB_thumSet{position:relative;margin-top:10px;width:580px;overflow:hidden}
#DB_gallery .DB_thumSet .DB_thumMove{position:relative;white-space:nowrap;font-size:0}
#DB_gallery .DB_thumSet .DB_thumMove li{display:inline;margin-right:8px}
#DB_gallery .DB_thumSet .DB_prevPageBtn{position:absolute;top:0;cursor:pointer;left:0;}
#DB_gallery .DB_thumSet .DB_nextPageBtn{position:absolute;top:0;cursor:pointer;right:0;}
#DB_gallery .DB_thumSet .DB_thumLine{position:absolute;width:100px;height:63px;border:5px solid #ff0000;left:0;top:0}

附件:下载该文件资源,减少时间成本(增值服务)