js 轮播图

var slideshow = $("#slideshow");
var pic_set = $("#pic_set");
var page_up = $("#page_up");
var page_down = $("#page_down");
var circles = $("#circles").children;
var index = 0;
var max_index = pic_set.children.length-1;
var timer = 0;


function animate(offset) {
    var newLeft = parseInt(pic_set.style.left)+offset;
    if (newLeft>0) {
        newLeft = -4130;
    }
    if(newLeft<-4130){
        newLeft = 0;
    }
    pic_set.style.left = newLeft + "px";
}
page_up.onclick = function () {
    index--;
    if (index<0){
        index = max_index;
    }
    animate(590);
    ButtonShow()
}
page_down.onclick = function () {
    index++;
    if (index>max_index){
        index = 0;
    }
    var times = setInterval(function () {
        pic_set.style.opacity -= 0.2;
        if (pic_set.style.opacity<0){
            clearInterval(times)
            pic_set.style.opacity = 1.5;
            animate(-590);
        }
    },200)
    ButtonShow()
};
play();
slideshow.onmouseover = stop;
slideshow.onmouseout = play;
function stop () {
    clearInterval(timer)
}
function play () {
    timer = setInterval(page_down.onclick,2500);
}
function ButtonShow() {
    for(var i=0;i<circles.length;i++){
        circles[i].classList.remove("on")
    }
    circles[index].classList.add("on");
}
for(var i=0;i<circles.length;i++){
    circles[i].onmouseover = function(){
        var newIndex = parseInt(this.getAttribute("a"));
        var offset = (index - newIndex)*590;
        index = newIndex;
        animate(offset);
        ButtonShow();
    }
}