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>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

<style type="text/css">
/*reset css*/
*{margin:0;padding:0;list-style:none;border:0;}
/*demo css*/
.i_box{position:relative;overflow:hidden;width:700px;height:350px;margin:40px auto 0 auto;}
.i_imglist{width:700px;height:350px;z-index:0}
.i_imglist li img{width:700px;height:350px;display:block}
.i_nav{position:absolute;left:20px;bottom:0;overflow:hidden;width:660px;height:30px;z-index:2}
.i_nav ul li{float:left;_display:inline;width:163px;height:30px;margin:0 1px;background-color:#000;opacity:0.5;filter:alpha(opacity=50);text-align:center;line-height:30px;cursor:pointer}
.i_nav ul li.hover{background-color:#fff;opacity:0.8;filter:alpha(opacity=80)}
.i_nav ul li a{color:#fff;text-decoration:none}
.i_nav ul li a:hover{text-decoration:underline}
.i_nav ul li.hover a{color:#000}
.i_prev a,.i_next a{position:absolute;overflow:hidden;width:19px;height:30px;background-color:#000;color:#fff;text-align:center;font-weight:bold;opacity:0.9;filter:alpha(opacity=90);text-decoration:none;line-height:30px}
.i_prev a{left:0;bottom:0}
.i_next a{right:0;bottom:0}
.i_prev a:hover,.i_next a:hover{background-color:#fff;opacity:0.8;filter:alpha(opacity=80);color:#000}
</style>

</head>
<body>

<div class="i_box">

	<div class="i_imglist">
		<ul id="J_imgList">
			<li><a href="#"><img src="images/a358be24367a5ea9dec7aa61a7527a7ab16009b9_m.jpg" alt="" title="" /></a></li>
			<li><a href="#"><img src="images/c4e37762e79866a2f10d3c5926bbd188924ddbd3_m.jpg" alt="" title="" /></a></li>
			<li><a href="#"><img src="images/c4e37762e79866a2f10d3c5926bbd188924ddbd3_m.jpg" alt="" title="" /></a></li>
			<li><a href="#"><img src="images/8a37e5af175db41e06004dc098e9c173aee70116_m.jpg" alt="" title="" /></a></li>
			
			<li><a href="#"><img src="images/61f4d9a7eb72c52d84b7d86abe75a85b96b52da8_m.jpg" alt="" title="" /></a></li>
			<li><a href="#"><img src="images/b74aaf555eb970c3a1fdd6e7b2b5dd2a7a971286_m.jpg" alt="" title="" /></a></li>
			<li><a href="#"><img src="images/156c2157ea31033cd8d2ae8431be8497387e5db0_m.jpg" alt="" title="" /></a></li>
			<li><a href="#"><img src="images/4dc9209aafd33affd86dd6c5b21b9f013ae06b88_m.jpg" alt="" title="" /></a></li>
			
			<li><a href="#"><img src="images/c4e37762e79866a2f10d3c5926bbd188924ddbd3_m.jpg" alt="" title="" /></a></li>
			<li><a href="#"><img src="images/c4e37762e79866a2f10d3c5926bbd188924ddbd3_m.jpg" alt="" title="" /></a></li>
			<li><a href="#"><img src="images/8a37e5af175db41e06004dc098e9c173aee70116_m.jpg" alt="" title="" /></a></li>
			<li><a href="#"><img src="images/61f4d9a7eb72c52d84b7d86abe75a85b96b52da8_m.jpg" alt="" title="" /></a></li>
			
			<li><a href="#"><img src="images/156c2157ea31033cd8d2ae8431be8497387e5db0_m.jpg" alt="" title="" /></a></li>
			<li><a href="#"><img src="images/4dc9209aafd33affd86dd6c5b21b9f013ae06b88_m.jpg" alt="" title="" /></a></li>
		</ul>
	</div><!--切换大图-->
	
	<div class="i_nav">
		<div class="i_navlist">
			<ul id="J_navList">
				<li><a href="#">标题</a></li>
				<li><a href="#">一直照进我心里</a></li>
				<li><a href="#">往事已遥远</a></li>
				<li><a href="#">一年又一年</a></li>
				
				<li><a href="#">22风吹起的青色衣衫</a></li>
				<li><a href="#">夕阳里的温暖容颜</a></li>
				<li><a href="#">你比以前更加美丽</a></li>
				<li><a href="#">像盛开的花</a></li>
				
				<li><a href="#">33阳光真温暖</a></li>
				<li><a href="#">一直照进我心里</a></li>
				<li><a href="#">往事已遥远</a></li>
				<li><a href="#">一年又一年</a></li>
				
				<li><a href="#">44风吹起的青色衣衫</a></li>
				<li><a href="#">夕阳里的温暖容颜</a></li>
			</ul>
		
		</div>
	</div><!--图片导航-->
	
	<div class="i_prev" id="J_prev"><a href="javascript:void(0)">&lt;&nbsp;</a></div>
	<div class="i_next" id="J_next"><a href="javascript:void(0)">&nbsp;&gt;</a></div>

</div>

<script type="text/javascript" src="js/script.js"></script>
</body>
</html>

JS代码(script.js):

$( function(){
	var imgField=$('#J_imgList');
	var imgList=$('#J_imgList>li');
	var navField=$('#J_navList');
	var navList=$('#J_navList>li');
	var btnPrev=$('#J_prev');
	var btnNext=$('#J_next');
	var turnPage=4;
	//每屏显示数var T=5000;
	//切换间隔时间var turnT=300;
	//animate时间var N=0;
	//图片初始索引var P=1;
	//屏初始索引var goFun=null;
	var hoverFun=null;
	var triggerFun=null;
	var delayFun=nullvar navListW=navList.outerWidth(true);
	var turnPages=Math.ceil(navList.size()/turnPage);
	//初始图片区域高度与标题区域宽度imgField.height(imgList.size()*imgList.height());
	navField.width(navList.size()*navListW);
	//初始自动切换GO();
	//自动切换function GO(){
	imgField.stop().animate({
	marginTop:-N*(imgList.height())}
,turnT);
	navList.eq(N).addClass('hover').siblings().removeClass('hover');
	if(N%turnPage==0){
	navField.stop().animate({
	marginLeft:-N*navListW+'px'}
,turnT);
}
N++;
	//console.log(N)N= N>=imgList.size()?0:N;
	P=Math.ceil(N/turnPage);
	goFun=setTimeout(GO,T);
}
//停止切换function STOP(){
	clearTimeout(goFun);
}
//标题划过移出navList.hover( function(){
	clearTimeout(delayFun);
	STOP();
	N=navList.index(this);
	imgField.stop().animate({
	marginTop:-N*(imgList.height())}
,turnT);
	$(this).addClass('hover').siblings().removeClass('hover');
}
,function(){
	N++;
	delayFun=setTimeout(GO,T)}
);
	//图片划过移出imgList.hover( function(){
	N=imgList.index(this);
	navList.eq(N).trigger('mouseover');
}
,function(){
	navList.eq(N).trigger('mouseleave');
}
);
	//左切换btnPrev.click( function(){
	if(P==1){
	navField.animate({
	marginLeft:-turnPage*navListW*(turnPages-1)+'px'}
,turnT);
	P=turnPages;
}
else{
	STOP();
	P--;
	navField.animate({
	marginLeft:-turnPage*navListW*(P-1)+'px'}
,turnT);
}
navList.eq((P-1)*turnPage).trigger('mouseover');
	GO();
}
);
	//右切换btnNext.click( function(){
	if(P==turnPages){
	navField.animate({
	marginLeft:0}
,turnT);
	P=1;
}
else{
	STOP();
	P++;
	navField.animate({
	marginLeft:-turnPage*navListW*P+'px'}
);
}
navList.eq((P-1)*turnPage).trigger('mouseover');
	GO();
}
);
}
);

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