html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/demo.css">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/demo.js"></script>
</head>
<body>
<div class="igs">
<div class="ig"><img src="data:images/1.jpg"></div>
<div class="ig"><img src="data:images/2.jpg"></div>
<div class="ig"><img src="data:images/3.jpg"></div>
<div class="ig"><img src="data:images/4.jpg"></div>
<div class="ig"><img src="data:images/5.jpg"></div>
<div class="ig"><img src="data:images/6.jpg"></div>
</div>
<div class="tabs">
<div class="tab bg">1</div>
<div class="tab">2</div>
<div class="tab">3</div>
<div class="tab">4</div>
<div class="tab">5</div>
<div class="tab">6</div>
</div>
</body>
</html>
css
*{
margin: 0px;
padding: 0px;
font-family:"微软雅黑";
}
.ig{
position:absolute;
}
.tab{
color: #fff;
width: 30px;
height: 30px;
background-color: #66c;
float: left;
text-align: center;
line-height: 30px;
margin-right: 10px;
border-radius: 100%;
cursor:pointer;
}
.tabs{
position: absolute;
top: 290px;
left: 250px;
}
.bg{
background-color: red;
}
js
var i = 0;
var timer;
$(function() {
$(".ig").eq(0).show().siblings().hide();//第一张图片显示，其TA隐藏
timer = Lb();
$(".tab").hover(function(){ //鼠标移入
i = $(this).index(); //获取当前索引
Show();
clearInterval(timer); //清除循环
},function(){ //鼠标移出
timer =Lb(); //恢复循环
});
}); function Lb(){
setInterval(function(){//循环播出
i++;
if(i==6){
i=0;
}
Show();
},3000);//3s
} function Show(){
// $(".ig").eq(i).show().siblings().hide();
$(".ig").eq(i).fadeIn(300).siblings().fadeOut(300);//当前淡入其TA淡出，
$(".tab").eq(i).addClass("bg").siblings().removeClass("bg");//当前添加样式，其TA清除样式
}