"); } $(".banner .num li").first().addClass('on'); //鼠标划入圆点 $(".banner .num li").hover(function(){ var index=$(this).index(); i=index; $(".banner .img").stop().animate({left:-index*1000},500); $(this).addClass('on').siblings().removeClass('on'); })

/自动轮播/
var t=setInterval(function(){
i++;
move();
},2000);

//对banner定时器的操作
$(".banner").hover(function(){
clearInterval(t);
},function(){
t=setInterval(move,2000);
})

/向左按钮/
$(".banner .btn_l").click(function(){
i++;
move();
})
/向右按钮/
$(".banner .btn_r").click(function(){
i--;
move();
})

function move(){
if(i==size){
$(".banner .img").css({left:0});
i=1;
}
if(i==-1){
$(".banner .img").css({left:-(size-1)*1000});
i=size-2;
}

$(".banner .img").stop().animate({left:-i*1000},500);

if(i==size-1){
$(".banner .num li").eq(0).addClass('on').siblings().removeClass('on');
}else{
$(".banner .num li").eq(i).addClass('on').siblings().removeClass('on');
}
}
})

*{padding:0;margin:0;list-style: none;} .banner{ margin:100px auto; border:5px solid #000; width:1000px; height:640px; position: relative; overflow: hidden; } .banner .img{ width:5000px; position: absolute; left:0px; top:0px;

}
.banner .img li{
float:left;
}
.banner .num{
position:absolute;
width:100%;
bottom:20px;
left:0px;
text-align: center;
font-size: 0px;
}
.banner .num li{
width:10px;
height:10px;
background: #888;
border-radius: 50%;
display: inline-block;
margin:0 3px;
cursor: pointer;

}
.banner .num li.on{
background: #f00;
}
.banner .btn{
width:30px;
height:50px;
background: rgba(0,0.5);
position:absolute;
top:50%;
margin-top:-25px;
cursor: pointer;
text-align: center;
line-height: 50px;
color:#fff;
font-size: 40px;
font-family: "宋体";
display: none;
}
.banner:hover .btn{
display: block;
}
.banner .btn_l{
left:0px;
}
.banner .btn_r{
right:0px;
}