遮罩层

<script>
    var to_right = document.getElementsByClassName('to-right')[0];
    var to_left = document.getElementsByClassName('to-left')[0];
    var banner = document.getElementsByClassName('banner')[0];
    var arr = [];
    var count = 1;

    to_right.onclick = function() {
        toRight();
    }
    
    function toRight(){
        arr.push(window.setInterval("moveLeft()", 22));
    }
    
    to_left.onclick = function() {
        toLeft();
    }

    function toLeft(){
        arr.push(window.setInterval("moveRight()", 22));
    }
    
    function moveLeft() {
        if(count < 5) {
            if(banner.offsetLeft > count * (-1034)) {
                banner.style.marginLeft = banner.offsetLeft - 22 + "px";
            } else {
                for(var x in arr) {
                    window.clearInterval(arr[x]);
                }
                count++;
            }
        }
    }
    
    function moveRight() {
        if(count > 1) {
            if(banner.offsetLeft < (count-2) * (-1034)) {
                banner.style.marginLeft = banner.offsetLeft + 22 + "px";
            } else {
                for(var x in arr) {
                    window.clearInterval(arr[x]);
                }
                count--;
            }
        }
    }

posted @ 2017-08-14 11:47  壹路桐行丨  阅读(107)  评论(0编辑  收藏  举报