<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery.min.js"></script>
</head>
<style>
*{
padding:0;
margin:0;
list-style:none;
}
.banner{
width:1200px;
height:350px;
overflow:hidden;
margin:0 auto;
}
.banner ul{
width:3600px;
position:relative;
}
.banner ul li{
float:left;
}
.squree{
width:500px;
height:50px;
}
.squree ul li{
width:70px;
height:6px;
background:#fff;
position:relative;
top:-28px;
left:598px;
display:inline-block;
margin-left: 10px;
}
.squree .active{
background:blue;
}
</style>
<body>
<div class="content">
<div class="banner">
<ul>
<li><img src="image/banner1.png"></li>
<li><img src="image/banner2.png"></li>
<li><img src="image/banner3.png"></li>
</ul>
</div>
<div class="squree">
<ul>
<li class="active"></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<script>
$(function(){
var squree = $(".squree ul li");
var banner=$(".banner ul li");
var bannerul= $(".banner ul");
var slderWidth=banner.eq(0).width();
//用来计数
var count=0;
var time=null;
squree.on('click',function(){
$(this).addClass('active').siblings().removeClass('active');
var index =$(this).index();
count=index;
bannerul.animate({"left":-count*slderWidth});
})
time =setInterval(function(){
count++;
if(count>squree.length-1){
count=0;
}
// trigger()触发某个事件
squree.eq(count).trigger('click');
},2000)
})
</script>
</body>
</html>
