jquery滚动轮播

<script type="text/javascript">
$(function(){
var num=0;
var timer =setInterval(add,1000)
//定时器函数
function add(){
num++;

if(num==6){
$('.dian ul li').eq(0).addClass('active').siblings().removeClass('active')
}
if(num==7){
$('.list').css({'left':'0px'});
num=1;
}
$('.list').stop().animate({
'left':-1024*num+'px'
})
$('.dian ul li').eq(num).addClass('active').siblings().removeClass('active')
}
//鼠标滑过大块的时候
$('#wrap').hover(function(){
//清除定时器
clearInterval(timer)
},function(){
//启动定时器
timer =setInterval(add,1000)
})
//点击左边的时候
$('#left').click(function(){
num--;
if(num==-1){
$('.dian ul li').eq(5).addClass('active').siblings().removeClass('active')
}
if(num==-1){
num= 5;
$('.list').css({'left':-6144+'px'});
}
$('.list').stop().animate({
'left':-1024*num+'px'
})
$('.dian ul li').eq(num).addClass('active').siblings().removeClass('active')
})
//点击右边的时候
$('#right').click(function(){
num++;
if(num==6){
$('.dian ul li').eq(0).addClass('active').siblings().removeClass('active')
}
if(num==7){
num= 1
$('.list').css({'left':'0px'});
}
$('.list').stop().animate({
'left':-1024*num+'px'
})
$('.dian ul li').eq(num).addClass('active').siblings().removeClass('active');

})
//下面小点
$('.dian ul li').click(function(){
num==$(this).index()
$('.list').stop().animate({
'left':-1024*num+'px'
})
$(this).addClass('active').siblings().removeClass('active')

})

})

</script>

/html

<div id="wrap">
<ul class="list">
<li><a href=""><img src="img/banner1.jpg"/></a></li>
<li><a href=""><img src="img/banner2.jpg"/></a></li>
<li><a href=""><img src="img/banner3.jpg"/></a></li>
<li><a href=""><img src="img/banner4.jpg"/></a></li>
<li><a href=""><img src="img/banner5.jpg"/></a></li>
<li><a href=""><img src="img/banner6.jpg"/></a></li>
<li><a href=""><img src="img/banner1.jpg"/></a></li>
</ul>
<a href="#" class="left att" id="left"><</a>
<a href="#" class="right att" id="right">></a>
<div class="dian">
<ul>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>

/css/

<style type="text/css">
*{
margin: 0;
padding: 0;
}
ol,ul,li{
list-style: none;
}
#wrap{
width: 1024px;
height: 320px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
#wrap .list {
width: 7168px;
height: 320px;
position: absolute;
top: 0px;
left: 0px;
}
#wrap .list li{
float: left;
}
.att{
position: absolute;
top: 40%;
width: 30px;
height: 60px;
background: black;
opacity: 0.5;
line-height: 60px;
text-align: center;
font-size: 30px;
color: white;
text-decoration: none;
}
.left{
left: 0px;
}
.right{
right: 0px;
}
.dian{
width: 100px;
height: 30px;
position: absolute;
bottom: 0px;
right: 100px;
}
.dian>ul>li{
width: 10px;
height: 10px;
background: #343535;
border-radius: 50%;
float: left;
margin-left: 5px;
}
.dian>ul .active{
background: red;
}
</style>