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

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

<!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>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

<!doctype html>

<html>

<head>

<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>

$(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>

</div>

</div>

</body>

</html>

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

Hi，您需要填写昵称和邮箱！