<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-1.9.1.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
img{
width: 300px;
height:200px;
}
.box{
margin: 100px auto;
position: relative;
width: 300px;
height: 200px;
overflow: hidden;
}
ul{
width: 1500px;
height:200px;
position: relative;（重点）
}
li{
border-radius:10px ;
width: 300px;
float: left;
list-style: none;
}
.change{
overflow: hidden;
width: 300px;
height: 50px;
position: absolute;
bottom: 0;
right: 0;
}
.change span{
text-align: center;
float: left;
width: 50px;
height:50px;
line-height: 50px;
background-color: yellow;
color: black;
font-size: 16px;
margin-right: 10px;
cursor: pointer;
}
.change .active{
background: red;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li><a href="#"><img src="img/activity.png"/></a></li>
<li><a href="#"><img src="img/add-t.png"/></a></li>
<li><a href="#"><img src="img/banner.jpg"/></a></li>
<li><a href="#"><img src="img/gratuity.png"/></a></li>
<li><a href="#"><img src="img/gps-red.png"/></a></li>
</ul>
<div class="change">
<span class="active">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
</div>
<script>$().ready(function(){
var box=$('.box'),
ul=box.find('ul'),
num=box.find('.change span'),
w=box.find('ul li ').eq(0).width();
num.click(function(){
$(this).addClass('active').siblings().removeClass('active');
var index=$(this).index();
ul.animate({
"left":-w*index,
})
});
var timer=null;
var i=0;
timer=setInterval(function(){
i++;
if(i>num.length-1)
{
i=0;
}
num.eq(i).trigger("click"); },2000);
box.hover(function(){
clearInterval(timer); },function(){
timer=setInterval(function(){
i++;
if(i>num.length-1)
{
i=0;
}
box.eq(i).trigger("click");},2000);
})
});
</script>
</body>
</html>
