弹性字体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;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
/* picshow */
.picshow{position:relative;z-index:1;height:240px;width:930px;overflow:hidden;margin:60px auto 0 auto;}
.picshow .picwrap li{position:absolute;left:0px;top:0px;width:930px;height:240px;}
.picshow .picwrap li.hide{display:none;}
.picshow .picwrap li img{width:930px;height:240px;}
.picshow .butt{position:absolute;left:0px;bottom:0px;width:100%;height:40px;text-align:center;}
.picshow .butt .trans_bg{width:100%;height:100%;background:#000;opacity:0.5;filter:alpha(opacity=50);}
.picshow .butt ul{position:absolute;left:30px;top:0px;text-align:center;zoom:100%;}
.picshow .butt li{position:relative;float:left;display:inline;width:120px;height:34px;margin:3px 26px 0px 26px;padding-top:2px;text-align:center;opacity:0.5;filter:alpha(opacity=50);}
.picshow .butt li img.menu{width:116px;height:30px;cursor:pointer;}
.picshow .butt li img.bg{position:absolute;left:0px;top:0px;cursor:pointer;}
.picshow .butt li.on{opacity:1;filter:alpha(opacity=100);}
.picshow .pic_titles{position:absolute;bottom:40px;left:0px;width:100%;}
.picshow .pic_titles ul{margin-left:30px;}
.picshow .pic_titles li{float:left;display:inline;width:172px;height:22px;overflow:hidden;text-align:center;}
.picshow .pic_titles li p{display:none;width:100%;height:22px;overflow:hidden;line-height:22px;text-align:center;color:#fff;font-size:14px;font-weight:bold;}
</style>
<div class="picshow">
	<div class="picwrap">
		<ul>
			<li><a href="#"><img src="images/01.jpg" width="930" height="240" alt="标题" /></a></li>
			<li class="hide"><a href="#"><img src="images/02.jpg" width="930" height="240" alt="标题" /></a></li>
			<li class="hide"><a href="#"><img src="images/03.jpg" width="930" height="240" alt="标题" /></a></li>
			<li class="hide"><a href="#"><img src="images/04.jpg" width="930" height="240" alt="标题" /></a></li>
			<li class="hide"><a href="#"><img src="images/05.jpg" width="930" height="240" alt="标题" /></a></li>
		</ul>
	</div>
	<div class="pic_titles">
		<ul>
			<li><p>标题</p></li>
			<li><p>标题</p></li>
			<li><p>标题</p></li>
			<li><p>标题</p></li>
			<li><p>标题</p></li>
		</ul>
	</div>
	<div class="butt buttons">
		<div class="trans_bg"></div>
		<ul>
			<li class="on"><img class="menu" src="" alt="标题" /><img class="bg" src="images/li_cor.gif" alt="标题" /></li>
			<li><img class="menu" src="" alt="标题" /><img class="bg" src="images/li_cor.gif" alt="标题" /></li>
			<li><img class="menu" src="" alt="标题" /><img class="bg" src="images/li_cor.gif" alt="标题" /></li>
			<li><img class="menu" src="" alt="标题" /><img class="bg" src="images/li_cor.gif" alt="标题" /></li>
			<li><img class="menu" src="" alt="标题" /><img class="bg" src="images/li_cor.gif" alt="标题" /></li>
		</ul>
	</div>
</div>

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/zzsc.js"></script>
</body>
</html>

JS代码(zzsc.js):

$(document).ready(function($){
	var bigpics=$(".picshow .picwrap img");
	var smallpics=$(".picshow .buttons li img.menu");
	var ptitles=$(".picshow .pic_titles li p");
	for(i=0;
	i<smallpics.length;
	i++){
	smallpics.eq(i).attr("src",bigpics.eq(i).attr("src")).attr("alt",bigpics.eq(i).attr("alt"));
	ptitles.eq(i).html(bigpics.eq(i).attr("alt"));
}
$(".picshow .buttons li").click(function(){
	if($(".picshow .picwrap li").is(":animated")||$(this).hasClass("on")) return;
	var indexNow=$(".picshow .buttons li").index(this);
	var currMenu=$(".picshow .buttons li").filter(".on");
	var currPic=$(".picshow .picwrap li").filter(":visible");
	nowPic=$(".picshow .picwrap li").eq(indexNow);
	currPic.fadeOut(800);
	nowPic.fadeIn(800);
	currMenu.removeClass("on");
	$(this).addClass("on");
}
).hover(function(){
	var ptitles=$(".picshow .pic_titles li p");
	var pindex=$(".picshow .buttons li").index($(this));
	ptitles.eq(pindex).show("slow");
}
,function(){
	var ptitles=$(".picshow .pic_titles li p");
	var pindex=$(".picshow .buttons li").index($(this));
	ptitles.eq(pindex).hide("slow");
}
);
	//自动轮换maxPiclist=$( ".picshow .buttons ul" ).children().length;
	currPiclist=0;
	$( ".picshow .buttons ul,.picshow .picwrap" ).mouseout( function(){
	var index=$(".picshow .buttons ul").children().index( $(".picshow .buttons ul").children(".on") );
	currPiclist=index;
	intPiclist=setInterval(function(){
	currPiclist++;
	if( currPiclist==maxPiclist ) currPiclist=0;
	$(".picshow .buttons ul").children().eq( currPiclist ).one( "click",function(e){
	e.stopPropagation();
}
);
	$(".picshow .buttons ul").children().eq( currPiclist ).click();
}
,3500);
}
);
	$( ".picshow .buttons ul,.picshow .picwrap" ).mouseover( function(){
	if(intPiclist) clearInterval( intPiclist );
}
);
	$( ".picshow .picwrap" ).mouseout();
}
);

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