轮播图作业

效果：

布局：js代码：

js部分：

var btn=$("#btn li");
var list = $("#pic_con img");
var pre = $("#pre");
var next = $("#next");
var pic_con = $("#pic_con");
btn.click(function () {
    var cur = $(this).index();
    $(this).addClass("on").siblings().removeClass("on");
    pic_con.animate({left: -646 * cur}, 2000);
});
pre.click(function () {
    var cur = $(".on").index();
    cur += 1;
    if (cur > btn.length) {
        cur = 0;
        btn.eq(cur).addClass("on").siblings().removeClass("on");
    } else {
        pic_con.animate({left: -646 * cur}, 2000);
        if (cur !== btn.length) {
            btn.eq(cur).addClass("on").siblings().removeClass("on");
        } else {
            btn.eq(0).addClass("on").siblings().removeClass("on");
            pic_con.animate({left: 0}, 0);
        }
    }
});
next.click(function () {
    var cur = $(".on").index();
    cur -= 1;
    if (cur < -1) {
        cur = $("#pic_con img").length;
        btn.eq(cur).addClass("on").siblings().removeClass("on");
    } else {
        pic_con.animate({left: -646 * cur}, 2000);
        if (cur !== -1) {
            btn.eq(cur).addClass("on").siblings().removeClass("on");
        } else {
            cur=$("#pic_con img").length-3;
            btn.eq(cur).addClass("on").siblings().removeClass("on");
            pic_con.animate({left: -646 * cur}, 0);
        }
    }
});
//automatic carousel
var timer;
start();  
function start(){
    clearInterval(timer);
    timer=setInterval(function(){
    var cur = $(".on").index();
    cur += 1;
    //stop automatic carousel
    stop();
    if (cur > btn.length) {
        cur = 0;
        btn.eq(cur).addClass("on").siblings().removeClass("on");
      } else {
        pic_con.animate({left: -646 * cur}, 1000);
        if (cur !== btn.length) {
            btn.eq(cur).addClass("on").siblings().removeClass("on");
        }else {
                btn.eq(0).addClass("on").siblings().removeClass("on");
                pic_con.animate({left: 0}, 0);
            }
        }
    },3500);
}
//stop automatic carousel when mouse move
function stop(){
    $("#container").hover(function (){clearInterval(timer);},function(){ start();
    });
}