jQuery顶部带有选项卡的焦点图效果
分类：实例代码
jQuery顶部带有选项卡的焦点图效果属于前端实例代码，有关更多实例代码大家可以查看。
本章节分享一段代码实例，它实现了顶部带有选项卡的焦点图效果。
当鼠标悬浮选项卡可以实现图片切换，点击左右箭头也可以实现切换效果。
更多焦点图内容可以参阅焦点图轮播效果。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
.win{
width:700px;
height:300px;
border:1px solid #ccc;
margin:20px auto;
position:relative;
overflow: hidden;
}
.title{
width:100%;
height:30px;
background:#eee;
position: relative;
}
.title a{
width:20%;
height:100%;
float:left;
text-align:center;
line-height:30px;
font-size:15px;
color:#009797;
text-decoration:none;
position:relative;
z-index:1;
}
.title .float{
width:20%;
height:100%;
background:#009797;
position:absolute;
}
.box{
width:100%;
height:270px;
position:relative;
}
.box div{
width:100%;
height:100%;
position:absolute;
left:-100%;
font-size:70px;
text-align:center;
line-height:270px;
top:0;
color:#fff;
}
.rightB{
width:50px;
height:70px;
font-size:20px;
color:#fff;
background:rgba(0,0,0,0.5);
position:absolute;
right:0;
top:45%;
line-height:70px;
text-align:center;
cursor:pointer;
display: none;
}
.leftB{
width:50px;
height:70px;
font-size:20px;
color:#fff;
background:rgba(0,0,0,0.5);
position:absolute;
left:0;
top:45%;
line-height:70px;
text-align:center;
cursor:pointer;
display:none;
}
.color1{background:#FFB12F;}
.color2{background:#00C378;}
.color3{background:#26B2E3;}
.color4{background:#E84C3D;}
.color5{background:#F831FD;}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(function(){
var win=$(".win");
var links=$(".title a");
var float=$(".float");
var divs=$(".box div");
var num1=0; //当前内容的下标
var num2=0;
win.hover(function(){
$(".leftB,.rightB").css("display","block");
},function(){
$(".leftB,.rightB").css("display","none");
});
$(".leftB").click(function(){
divs.finish();
float.stop(true);
var temp=num1;
num1--;
if(num1==-1){
num1=4;
}
divs.eq(num1).css("left",700).animate({left:0});
divs.eq(temp).animate({left:-700});
links.css("color","#009797");
float.animate({
left:links.eq(num1).position().left
})
links.eq(num1).css("color","#fff");
});
$(".rightB").click(function(){
divs.finish();
float.stop(true);
var temp=num1;
num1++;
if(num1==5){
num1=0;
}
divs.eq(num1).css("left",-700).animate({left:0});
divs.eq(temp).animate({left:700});
links.css("color","#009797");
float.animate({left:links.eq(num1).position().left})
links.eq(num1).css("color","#fff");
});
links.hover(function(){
//滑块操作
divs.finish();
float.stop(true);
links.css("color","#009797");
var that=$(this);
var lefts=$(this).position().left;
float.animate({left:lefts},function(){
that.css("color","#fff");
})
//滑块操作
//内容变化
var index=$(this).index(".title a");
num2=index;
if(num1==num2){
return;
}else if(num1<num2){
divs.eq(num2).css("left",700).animate({left:0});
divs.eq(num1).animate({left:-700});
}else if(num1>num2){
divs.eq(num2).css("left",-700).animate({left:0});
divs.eq(num1).animate({left:700});
}
num1=num2;
num2="";
},function(){
})
})
</script>
</head>
<body>
<div class="win">
<div class="title">
<a href="javascript:;" style="color:#fff">1</a>
<a href="javascript:;">2</a>
<a href="javascript:;">3</a>
<a href="javascript:;">4</a>
<a href="javascript:;">5</a>
<div class="float"></div>
</div>
<div class="box">
<div class="color1" style="left:0">page1</div>
<div class="color2">page2</div>
<div class="color3">page3</div>
<div class="color4">page4</div>
<div class="color5">page5</div>
</div>
<div class="leftB"><</div>
<div class="rightB">></div>
</div>
</body>
</html>
jQuery顶部带有选项卡的焦点图效果，这样的场景在实际项目中还是用的比较多的，关于jQuery顶部带有选项卡的焦点图效果就介绍到这了。