在浏览各网站的时候,经常看到某些网站中,都会一些自动+手动切换内容的效果,或者是焦点图式,或者是选项卡式。 今天就给简单的谢了一个用jQuery实现图片自动+手动切换的例子。
HTML代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery实现自动切换+手动切换</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/qiehuan.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<article class="wrapper">
<h1>JQuery实现自动切换+手动切换</h1>
<div class="tab clearfix">
<ul class="tabMenus">
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
</ul>
<div class="tabCons">
<div class="con">1111</div>
<div class="con">2222</div>
<div class="con">3333</div>
<div class="con">4444</div>
</div>
</div>
</article>
</body>
</html>
CSS代码:
*{
margin:0;
padding:0;
}
body{
font-size:12px;
color:#222;
font-family:"Microsoft YaHei",SimHei;
background:#f0f0f0;
}
.clearfix:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix{
zoom:1;
}
ul,li{
list-style:none;
}
.wrapper{
width:800px;
margin:0 auto;
padding-bottom:50px;
}
h1{
height:50px;
line-height:50px;
font-size:22px;
font-weight:normal;
margin-bottom:20px;
text-align: center;
}
.tab{
width: 100%;
}
.tabMenus{
width: 100px;
float: left;
}
ul.tabMenus li{
width: 68px;
height: 68px;
margin-bottom: 15px;
background-color: #737373;
border: 1px solid #737373;
color: #fff;
text-align: center;
}
ul.tabMenus li.on{
background-color: #ffffff;
color: #737373;
}
.tabCons{
width: 400px;
float: left;
height: 323px;
border: 1px solid #737373;
}
.tabCons .con{
width: 100%;
height: 100%;
}
JS代码:
$(function(){
var tabTimer;
var len = $(".tab .tabCons .con").length;
var i = 0;
$(".tab .tabCons .con:gt(0)").hide(); //默认显示第一内容部分
$(".tab .tabMenus li").eq(0).addClass("on");
//鼠标滑上选项标签停止自动播放,滑出时开始自动播放
$(".tab .tabMenus li").hover(function(){
clearInterval(tabTimer);
},function(){
tabTimer = setInterval(function(){
if( i < len ){
$(".tab .tabMenus li").eq(i).addClass("on").siblings().removeClass("on");
$(".tab .tabCons .con").eq(i).show().siblings().hide();
i++;
}else{
i = 0;
}
},2000);
}).trigger("mouseleave");
//手动切换
$(".tab .tabMenus li").hover(function(){
$(this).addClass("on").siblings().removeClass("on"); //标签部分样式切换
var index = $(this).index();
$(".tab .tabCons .con").eq(index).show().siblings().hide(); //内容部分切换效果
});
});