js轮播图

近日，想写一些页面练习前面所学的东西，因为经常在极客学院看视频教程，所以一时兴起就仿照极客学院官网，制作了一个简单的页面，实现了基本的前端页面，及动画效果。其中一个轮播图算是有点难度的，故而总结下，加深记忆。

/*
interval：对应的是自动切换的延时
imgwidth:对应轮播图，每个图片的大小
container:顶层容器
banner_list:包含轮播图的父级容器
buttons:可选参数，设置下方的切换小按钮，如没有可设为null
prev,next:可选参数，设置左右两个切换按钮
*/
function slider_banner(interval, img_width, container, banner_list, buttons, prev, next) {
    var container = document.getElementById(container);
    var list = document.getElementById(banner_list);
    var showButton = function(){};//showButton由buttons控制
    //判断是否有prev和next，如果有,添加相应的函数，没有直接跳过
    if(prev && next) {
        var prev = document.getElementById(prev);
        var next = document.getElementById(next);
        next.onclick = next_click;

        prev.onclick = function() {
            if(animated) {
                return;
            }
            if(index == 1) {
                index = len;
            } else {
                index -= 1;
            }
            animate(img_width);
            showButton();
        }
    }
    //原理同上
    if(buttons) {
        var buttons = document.getElementById(buttons).getElementsByTagName("a");

        function isshowButton() {
            for(var i = 0; i < buttons.length; i++) {
                if(buttons[i].className == "active") {
                    buttons[i].className = "";
                    break;
                }
            }
            buttons[index - 1].className = "active";
        }
        for(var i = 0; i < buttons.length; i++) {
            buttons[i].onclick = function() {
                if(animated) {
                    return;
                }
                if(this.className == "active") {
                    return;
                }
                var myIndex = parseInt(this.getAttribute("data-index"));
                console.log(myIndex);
                var offset = parseInt("-" + img_width) * (myIndex - index);
                animate(offset);
                index = myIndex;

                showButton();
            }
        }
        showButton = isshowButton;
    }
    //这个参数为用来匹配底部小按钮的
    var index = 1;
    //获取轮播图个数，因为我们要进行无缝轮播，所以多加两个图片，所以个数必须减去2
    var len = list.children.length - 2;
    //判断是否在执行动画
    var animated = false;
    var timer;//定时器

    function next_click() {
        if(animated) {
            return;
        }
        if(index == len) {
            index = 1;
        } else {
            index += 1;
        }
        animate(parseInt("-" + img_width));
        showButton();
    }

    function animate(offset) {
        if(offset == 0) {
            return;
        }
        animated = true;
        var time = 600;
        var inteval = 30;
        var speed = offset / (time / inteval);//设置速度

        var left = parseInt(list.style.left) + offset;

        var go = function() {
            if((speed > 0 && parseInt(list.style.left) < left) || (speed < 0 && parseInt(list.style.left) > left)) {//判断是否需要滚动
                list.style.left = parseInt(list.style.left) + speed + "px";
                setTimeout(go, inteval);
            } else {
                list.style.left = left + "px";
                if(left > 0) {
                    list.style.left = parseInt("-" + img_width) * len + "px";
                }
                if(left < (parseInt("-" + img_width) * len)) {
                    list.style.left = parseInt("-" + img_width) + "px";
                }
                animated = false;
            }
        }
        go();
    }
    //自动轮播
    function play() {
        timer = setTimeout(function() {
            next_click();
            play();
        }, interval);
    }
    //停止轮播
    function stop() {
        clearTimeout(timer);
    }
    //鼠标移入顶层容器，停止，移出自动轮播
    container.onmouseover = stop;
    container.onmouseout = play;
    play();
}

最后附上我做的仿极客学院网站github地址：https://github.com/wd4219/jike.git
极客学院网址：http://www.jikexueyuan.com/