• 欢迎访问搞代码网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏搞代码吧

jQuery顶部带有选项卡的焦点图效果

jquery 程序员 6年前 (2019-03-03) 182次浏览 已收录 0个评论

当鼠标悬浮选项卡可以实现图片切换,点击左右箭头也可以实现切换效果。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.gaodaima.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>

 


搞代码网(gaodaima.com)提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected],我们会在看到邮件的第一时间内为您处理,或直接联系QQ:872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:jQuery顶部带有选项卡的焦点图效果
喜欢 (0)
[搞代码]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址