jQuery頂部帶有選項卡的焦點圖效果

antzone發表於2018-07-07
jQuery

本章節分享一段程式碼例項，它實現了頂部帶有選項卡的焦點圖效果。

當滑鼠懸浮選項卡可以實現圖片切換，點選左右箭頭也可以實現切換效果。

更多焦點圖內容可以參閱焦點圖輪播效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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>

相關文章