轮播图

• 
• 
• 
• 
• 

上一张 下一张

<script>
    var banner = document.getElementById('banner');
    var list = document.querySelectorAll('#banner>li');
    var next = document.querySelector('#next');
    var prev = document.querySelector('#prev');
    var btns = document.querySelectorAll('section>span');
    var view = document.getElementById('view')

    var flag = true;
    var index = 0;
    function nextShow() {
        if (flag) {
            index++;
            for (var j = 0; j < btns.length; j++) {
                btns[j].style.backgroundColor = 'blue';
            }
            if (index >= list.length - 1) {
                btns[0].style.backgroundColor = 'red';
            } else {
                btns[index].style.backgroundColor = 'red';
            }

            $_animation(banner, 'marginLeft', -500 * index, 1000, function () {
                if (index >= list.length - 1) {
                    index = 0;
                    banner.style.marginLeft = 0;
                }
            })
            flag = false;
        }
    }

    function prevShow() {
        if (flag) {
            index--;
            for (var j = 0; j < btns.length; j++) {
                btns[j].style.backgroundColor = 'blue';
            }
            if (index < 0) {
                btns[list.length - 2].style.backgroundColor = 'red'
            } else {
                btns[index].style.backgroundColor = 'red';
            }
            if (index < 0) {
                index = list.length - 1;
                banner.style.marginLeft = (-500 * (list.length - 1)) + 'px';
                index--;
            }
            $_animation(banner, 'marginLeft', -500 * index, 1000);
            flag = false;
        }
    }

    next.onclick = nextShow;
    prev.onclick = prevShow;


    btns[0].style.backgroundColor = 'red';
    for (var i = 0; i < btns.length; i++) {
        btns[i].i = i;
        btns[i].onmouseenter = function () {
            for (var j = 0; j < btns.length; j++) {
                btns[j].style.backgroundColor = 'blue';
            }
            index = this.i
            $_animation(banner, 'marginLeft', -500 * index, 1000, function () {
                if (index >= list.length - 1) {
                    index = 0;
                    banner.style.marginLeft = 0;
                }
            })
            btns[this.i].style.backgroundColor = 'red';
        }
    };
    var timer = setInterval(nextShow,2000) 

    //当鼠标移入view时候  清除定时器
    view.onmouseenter = function(){
         clearInterval(timer)
    } 

    view.onmouseleave = function(){
         timer = setInterval(nextShow,2000)
    } 
</script>