缩略图向上突起jQuery焦点图轮播滚动切换特效代码

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

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

以下是缩略图向上突起jQuery焦点图轮播滚动切换特效代码的示例演示效果:

当前平台(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>
</head>
<body>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
/* index_pic */
#index_pic{background:url(images/loadsmall.gif) no-repeat center;overflow:hidden;width:990px;position:relative;height:300px;overflow:hidden;margin:40px auto 0 auto;}
#index_pic ul{z-index:999;right:3px;bottom:0px;position:absolute;text-align:left}
#index_pic ul li{display:block;font-weight:900;font-size:12px;float:left;width:70px;color:#aaa;position:relative;height:50px;}
#index_pic li div{margin-top:5px;display:none;padding-left:10px;margin-left:70px}
#index_pic li img{border-right:#fff 1px solid;border-top:#fff 1px solid;filter:alpha(opacity=60);left:10px;float:left;border-left:#fff 1px solid;width:52px;cursor:pointer;margin-right:4px;border-bottom:#fff 1px solid;position:absolute;top:5px;height:35px;moz-opacity:0.6}
#back{width:990px;height:300px;overflow:hidden;}
#back .gray{filter:Gray();}
</style>
<div id="index_pic" class="index_pic">
	<ul>
		<li><img src="images/01.jpg" text="#|_self" pic="1" /></li>
		<li><img src="images/02.jpg" text="#|_blank" pic="2" /></li>
		<li><img src="images/03.jpg" text="#|_self" pic="3" /></li>
		<li><img src="images/04.jpg" text="#|_blank" pic="4" /></li>
		<li><img src="images/05.jpg" text="#|_blank" pic="5" /></li>
		<li><img src="images/06.jpg" text="#|_self" pic="6" /></li>
	</ul>
	<div id="back"><a href="#" target="_self"><img width="990" height="300" src="images/index1.jpg" /></a></div>
</div><!--index_pic end-->
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="js/zzsc.js"></script>	
</body>
</html>

JS代码(zzsc.js):

var num = 0;
	$("li img").load(function(){
	num++;
	if(num==5){
	$("#index_pic").show();
}
}
).click(function(){
	//����Ѿ�����active״̬��returnif (this.className.indexOf("active")!=-1)return;
	//active״̬��ͼƬ�ָ�ԭ��$("li img.active").fadeTo(200,0.6).removeClass("active").animate({
	top:5,width:52,left:10}
,300);
	//��ȡ����var i = $(this).attr("pic");
	var t = $(this).attr("text").split("|");
	//��ǰ$(this).animate({
	top:-5,width:52,height:35}
,100).addClass("active").fadeTo(200,1);
	$("#back").children().addClass("gray").end().fadeTo(500,0.1,function(){
	$(this).children("a").children("img").attr("src","images/index"+i+".jpg").removeClass("gray");
	//����ͼƬ$(this).children("a").attr("href",t[0]);
	$(this).children("a").attr("target",t[1]);
	$(this).fadeTo(500,1,function(){
	$("#frontText").html(t[0]).fadeIn(200);
	$("#frontTextBack").html(t[0]).fadeIn(200);
	$("#frontTextSub").html(t[1]).fadeIn(200)}
);
}
)}
);
	//��ʼ��һ��ͼƬvar i =0;
	show();
	function show(){
	if (i==$("li img").size())i = 0$("li img").eq(i).click();
	i++;
	setTimeout("show()",10000);
}
if (self.location.search!=""){
	var V = self.location.search;
	V = V.substr(1,V.length);
	eval(V);
	if (option.animate == 0){
	$("#index_pic ul").hide();
}
$("#back img").width($("#index_pic").width());
	$("#back img").height($("#index_pic").height());
}

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