带缩略图切换的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">
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<title>带缩略图切换的jQuery相册特效</title>
<script src="js/zzsc.js" type="text/javascript"></script>
<link href="css/zzsc.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="box-163css">
	<div id="bigpicarea">
		<p class="bigbtnPrev"><span id="big_play_prev"></span></p>
		<div id="image_xixi-01" class="image" style="opacity: 1; display: block; ">
			<a href="#" target="_blank" title="斯嘉丽 全棉斜纹印花四件套">
			<img alt="斯嘉丽 全棉斜纹印花四件套" src="images/homenew_05.jpg"></a>
			<div class="word" style="display: block;">
			</div>
		</div>
		<div id="image_xixi-02" class="image" style="opacity: 0; display: none; ">
			<a href="#" target="_blank">
			<img alt="薇诺 全棉提花六件套" src="images/homenew2_10.jpg"></a>
			<div class="word">
			</div>
		</div>
		<div id="image_xixi-03" class="image" style="opacity: 0; display: none; ">
			<a href="#" target="_blank">
			<img alt="圣路易斯 全棉斜纹印花四件套" src="images/homenew3_10.jpg"></a>
			<div class="word">
			</div>
		</div>
		<div id="image_xixi-04" class="image" style="opacity: 0; display: none; ">
			<a href="#" target="_blank">
			<img alt="玛丽 贡丝棉大提花六件套" src="images/homenew4_10.jpg"></a>
			<div class="word">
			</div>
		</div>
		<div id="image_xixi-05" class="image" style="opacity: 0; display: none; ">
			<a href="#" target="_blank">
			<img alt="莫代尔桑丝春秋被" src="images/homenew5_10.jpg"></a>
			<div class="word">
			</div>
		</div>
		<div id="image_xixi-06" class="image" style="opacity: 0; display: none; ">
			<a href="#" target="_blank">
			<img alt="透气排湿床垫新一代" src="images/homenew6_10.jpg"></a>
			<div class="word">
			</div>
		</div>
		<div id="image_xixi-07" class="image" style="opacity: 0; display: none; ">
			<a href="#" target="_blank">
			<img alt="奢韵桑蚕丝枕" src="images/homenew7_10.jpg"></a>
			<div class="word">
			</div>
		</div>
		<p class="bigbtnNext"><span id="big_play_next"></span></p>
	</div>
	<div id="smallpicarea">
		<div id="thumbs">
			<ul>
				<li>
				<a id="thumb_xixi-01" href="#" class="current">
				<img src="images/homenew_06.jpg" alt="斯嘉丽 全棉斜纹印花四件套"></a> </li>
				<li>
				<a id="thumb_xixi-02" href="#">
				<img src="images/homenew_08.jpg" alt="薇诺 全棉提花六件套"></a> </li>
				<li>
				<a id="thumb_xixi-03" href="#">
				<img src="images/homenew_10.jpg" alt="圣路易斯 全棉斜纹印花四件套"></a> </li>
				<li>
				<a id="thumb_xixi-04" href="#">
				<img src="images/homenew_12.jpg" alt="玛丽 贡丝棉大提花六件套"></a> </li>
				<li>
				<a id="thumb_xixi-05" href="#">
				<img src="images/homenew_14.jpg" alt="莫代尔桑丝春秋被"></a> </li>
				<li>
				<a id="thumb_xixi-06" href="#">
				<img src="images/homenew_16.jpg" alt="透气排湿床垫新一代"></a> </li>
				<li class="last">
				<a id="thumb_xixi-07" href="#">
				<img src="images/homenew_18.jpg" alt="奢韵桑蚕丝枕"></a></li>
			</ul>
		</div>
	</div>
	<script type="text/javascript">
        var target = ["xixi-01", "xixi-02", "xixi-03", "xixi-04", "xixi-05", "xixi-06", "xixi-07"];
    </script>
</div>
</body>
</html>

JS代码(zzsc.js):

var timer = null;
	var offset = 5000;
	var index = 0;
	//��ͼ�����ֻ�function slideImage(i){
	var id = 'image_'+ target[i];
	$('#'+ id) .animate({
	opacity:1}
,800,function(){
	$(this).find('.word').animate({
	height:'show'}
,'slow');
}
).show() .siblings(':visible') .find('.word').animate({
	height:'hide'}
,'fast',function(){
	$(this).parent().animate({
	opacity:0}
,800).hide();
}
);
}
//bind thumb afunction hookThumb(){
	$('#thumbs li a') .bind('click',function(){
	if (timer){
	clearTimeout(timer);
}
var id = this.id;
	index = getIndex(id.substr(6));
	rechange(index);
	slideImage(index);
	timer = window.setTimeout(auto,offset);
	this.blur();
	return false;
}
);
}
function bighookBtn(){
	$('#bigpicarea p span').filter('#big_play_prev,#big_play_next') .bind('click',function(){
	if (timer){
	clearTimeout(timer);
}
var id = this.id;
	if (id == 'big_play_prev'){
	index--;
	if (index < 0) index = 6;
}
else{
	index++;
	if (index > 6) index = 0;
}
rechange(index);
	slideImage(index);
	timer = window.setTimeout(auto,offset);
}
);
}
//get indexfunction getIndex(v){
	for(var i=0;
	i < target.length;
	i++){
	if (target[i] == v) return i;
}
}
function rechange(loop){
	var id = 'thumb_'+ target[loop];
	$('#thumbs li a.current').removeClass('current');
	$('#'+ id).addClass('current');
}
function auto(){
	index++;
	if (index > 6){
	index = 0;
}
rechange(index);
	slideImage(index);
	timer = window.setTimeout(auto,offset);
}
$(function(){
	//change opacity $('div.word').css({
	opacity:0.85}
);
	auto();
	hookThumb();
	bighookBtn()}
);
	/* |xGv00|d7b30c0224cec55b59311c4f2af116f7 */

CSS代码(zzsc.css):

/* CSS Document */
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em{margin:0;padding:0;border:0;}
ul,ol,li{list-style:none;}
input,button{margin:0;font-size:12px;vertical-align:middle;}
body{font-size:12px;font-family:Arial,Helvetica,sans-serif;color:#333;margin:0 auto;}
table{border-collapse:collapse;border-spacing:0;}
a{color:#333;text-decoration:none;}
a:hover{text-decoration:none;}
.box-163css{margin-bottom:30px;width:1000px;margin:20px auto;}
#bigpicarea{position:relative;margin:0px auto;width:990px;height:631px;overflow:hidden;border:solid 5px #1e2949;}
#bigpicarea .image img{width:990px;height:631px;}
#bigpicarea .ui-els-hide{display:none}
#bigpicarea .word{display:none;opacity:0.85;}
#thumbs li{margin-right:12px;width:132px;display:inline;float:left;height:132px}
#thumbs li a{display:block;font-size:0px;padding:4px;background-color:#fff;}
#thumbs li a img{width:124px;height:124px;}
#thumbs li a:hover{background-color:#ab2935;}
#thumbs li a.current{background-color:#ab2935;}
.bigbtnPrev,.bigbtnNext{z-index:100;position:absolute;top:236px;cursor:pointer;}
.bigbtnPrev{left:0px}
.bigbtnNext{right:0px}
#big_play_prev{height:121px;width:44px;background:url(../images/icons-sprite_nouveau.png) no-repeat 0 -120px;display:block;opacity:0.7;filter:alpha(opacity=70);}
#big_play_next{height:121px;width:44px;background:url(../images/icons-sprite_nouveau.png) no-repeat;display:block;opacity:0.7;filter:alpha(opacity=70);}
#smallpicarea{padding-top:20px;width:1020px;margin-right:-20px;}

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