js的轮播

详细代码去百度云盘 32457里面搜索恩施考研

html

    <div class="banner con_w">
            <ul class="img">
                <li><a href="javascript:;"><img src="../images/ban01.jpg" width="1200"></a></li>
                <li><a href="javascript:;"><img src="../images/ban01.jpg" width="1200"></a></li>
               
            </ul>
            <ul class="num"></ul>
            <div class="btn btn_l">&lt;</div>
            <div class="btn btn_r">&gt;</div>
        </div>

js

$(function(){


/*banner轮播*/
var i=0;
var clone=$(".banner .img li").first().clone();
$(".banner .img").append(clone);
var size=$(".banner .img li").size();
for(var j=0; j<size-1;j++){
$(".banner .num").append("<li></li>");
}
$(".banner .num li").first().addClass("on");
var t=setInterval( function(){
i++;
move()
},3000);
$(".banner").hover(function(){
clearInterval(t);
},function(){
t=setInterval( function(){
i++;
move();
},3000);
});
$(".banner .num li").hover(function(){
var index=$(this).index();
i=index;
$(".banner .img").animate({left:-i*1200},500);

$(this).addClass("on").siblings().removeClass("on");
});
$(".banner .btn_l").click(function(){
i--;
move();
});
$(".banner .btn_r").click(function(){
i++;
move();
});
function move(){
if(i==-1){
$(".banner .img").css({left:-(size-1)*1200});
i=size-2;
};
if(i==size){
$(".banner .img").css({left:0});
i=1;
};
$(".banner .img").stop().animate({left:-i*1200},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");
}
};
/*banner轮播*/

});