滚动的左右控制为什么不灵

<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
body { margin:0; padding:0; }
.clearfix:after { content:','; display:block; clear:both; height:0; visibility:hidden; }
.clearfix { *zoom:1; }
ul,li { margin:0; padding:0; }
ul { float:left; list-style:none; }
ul li { float:left; width:50px; height:50px; background-color:red; text-align:center; line-height:50px; }
#box { width:600px; position:absolute; top:0; }
#content { width:300px; height:50px; overflow:hidden; position:relative; }
ul li.two { background-color:yellow; }
ul li.stree { background-color:green; }
ul li.four { background-color:blue; }
ul li.five { background-color:#ccc; }
ul li.six { background-color:#ddd; }
</style>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<script type='text/javascript'>
//版本1
/*var timer;
function scrolls() {
    var $box = $('#box');
    var left = parseInt($box[0].style.left);
    left--;
    if(-left % 50 == 0) {
        clearInterval(timer);
        var time = setInterval(function() {
            timer = setInterval(scrolls, 50);
            clearInterval(time);
        }, 2000);
    }
    if(left == -300) {
        left = 0;
    }
    $box[0].style.left = left + 'px';
}
$(function() {
    $('#box')[0].innerHTML += $('#box')[0].innerHTML;
    timer = setInterval(scrolls, 50);
});*/
//版本2
var timer,time;
 
/*function scrolls() {
    var $box = $('#box');
    var left = parseInt($box[0].style.left);
    left--;
    if(-left % 50 == 0) {
        clearInterval(timer);
        var time = setInterval(function() {
            timer = setInterval(scrolls, 50);
            clearInterval(time);
        }, 2000);
    }
    if(left == -300) {
        left = 0;
    }
    $box[0].style.left = left + 'px';
}*/
 
function scrollFun(obj) {
 
    /*function scrolls() {
        var $box = $('#box');
        var left = parseInt($box[0].style.left);
        left--;
        if(-left % 50 == 0) {
            clearInterval(timer);
            var time = setInterval(function() {
                timer = setInterval(scrolls, 50);
                clearInterval(time);
            }, 2000);
        }
        if(left == -300) {
            left = 0;
        }
        $box[0].style.left = left + 'px';
    }*/
    function scrolls(flag) {
     
        var $box = $('#box');
        var left = parseInt($box[0].style.left);
        var right = parseInt($box[0].style.right);
         
        if(!scrolls.data || !scrolls.data.size) {
            if(!scrolls.data || scrolls.data.right != 'right') {
                left--;
                if(-left % 50 == 0) {
                    clearInterval(timer);
                    var time = setInterval(function() {
                        timer = setInterval(scrolls, 50);
                        clearInterval(time);
                    }, 2000);
                }
                if(left == -300) {
                    left = 0;
                }
                $box[0].style.left = left + 'px';
            } else {
                left = parseInt($box[0].style.left);
                left++;
                if(-left % 50 == 0) {
                    clearInterval(timer);
                    var time = setInterval(function() {
                        timer = setInterval(scrolls, 50);
                        clearInterval(time);
                    }, 2000);
                }
                if(left == 0) {
                    left = -300;
                }
                $box[0].style.left = left + 'px';
            }
        } else {
            if(!scrolls.data || scrolls.data.right != 'right') {
                left--;
                if(-left % parseInt(scrolls.data.size.width) == 0) {
                    clearInterval(timer);
                    var time = setInterval(function() {
                        timer = setInterval(scrolls, 50);
                        clearInterval(time);
                    }, 2000);
                }
                if(left == -(parseInt(scrolls.data.size.width)*6)) {
                    left = 0;
                }
                $box[0].style.left = left + 'px';
            } else {
                left = parseInt($box[0].style.left);
                left++;
                if(-left % parseInt(scrolls.data.size.width) == 0) {
                    clearInterval(timer);
                        time = setInterval(function() {
                        timer = setInterval(scrolls, 50);
                        clearInterval(time);
                    }, 2000);
                }
                if(left == 0) {
                    left = -(parseInt(scrolls.data.size.width)*6);
                }
                $box[0].style.left = left + 'px';
            }
        }
         
         
    }
     
    $('#box')[0].innerHTML += $('#box')[0].innerHTML;
     
    if(obj && obj.left == 'left') {
        scrolls.data = null;
        if(!obj.right || !obj.size) {
            timer = setInterval(scrolls, 50);
        }
    }
    else if(obj && obj.right == 'right') {
        if(obj.size) {
            $('#box')[0].style.left = '-' + (parseInt(obj.size.width)*6) + 'px';
        } else {
            $('#box')[0].style.left = '-300px';
        }
        scrolls.data = {right:'right'};
        if(!obj.size) {
            timer = setInterval(scrolls, 50);
        } 
    }
    if(obj && obj.size) {
        $('#content').css('width', (parseInt(obj.size.width)*6) + 'px');
        $('#box').css('width', (parseInt(obj.size.width)*12) + 'px');
        $('#box ul li').css('width', obj.size.width);
        scrolls.data = scrolls.data || {};
        scrolls.data.size = {width:obj.size.width};
        timer = setInterval(scrolls, 50);
    }
}
 
$(function() {
    scrollFun({
        //right:'right',
        left:'left'
        //size:{width:'100px'}
    });
    $('.btn').first().click(function() {
        clearInterval(timer);
        clearInterval(time);
        scrollFun({
            left:'left'
        });
    });
    $('.btn').eq(1).click(function() {
        clearInterval(timer);
        clearInterval(time);
        scrollFun({
            right:'right'
        });
    });
});
</script>
</head>
 
<body>
<div id='content' class='clearfix'>
    <div id='box' style='left:0;'>
        <ul>
            <li class='one'>1</li>
            <li class='two'>2</li>
            <li class='stree'>3</li>
            <li class='four'>4</li>
            <li class='five'>5</li>
            <li class='six'>6</li>
        </ul>
    </div>
</div>
<div>
    <button class='btn' value='向左'>向左</button><button class='btn' value='向右'>向右</button>
</div>
</body>
</html>
滚动的左右控制为什么不灵

解决方案 »

  1.   

    <!DOCTYPE html>
    <html>
    <head>
    <style type='text/css'>
    body { margin:0; padding:0; }
    .clearfix:after { content:','; display:block; clear:both; height:0; visibility:hidden; }
    .clearfix { *zoom:1; }
    ul,li { margin:0; padding:0; }
    ul { float:left; list-style:none; }
    ul li { float:left; width:50px; height:50px; background-color:red; text-align:center; line-height:50px; }
    #box { width:600px; position:absolute; top:0; }
    #content { width:300px; height:50px; overflow:hidden; position:relative; }
    ul li.two { background-color:yellow; }
    ul li.stree { background-color:green; }
    ul li.four { background-color:blue; }
    ul li.five { background-color:#ccc; }
    ul li.six { background-color:#ddd; }
    </style>
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
    <script type='text/javascript'>
    //版本1
    /*var timer;
    function scrolls() {
    var $box = $('#box');
    var left = parseInt($box[0].style.left);
    left--;
    if(-left % 50 == 0) {
    clearInterval(timer);
    var time = setInterval(function() {
    timer = setInterval(scrolls, 50);
    clearInterval(time);
    }, 2000);
    }
    if(left == -300) {
    left = 0;
    }
    $box[0].style.left = left + 'px';
    }
    $(function() {
    $('#box')[0].innerHTML += $('#box')[0].innerHTML;
    timer = setInterval(scrolls, 50);
    });*/
    //版本2
    var timer,time;/*function scrolls() {
    var $box = $('#box');
    var left = parseInt($box[0].style.left);
    left--;
    if(-left % 50 == 0) {
    clearInterval(timer);
    var time = setInterval(function() {
    timer = setInterval(scrolls, 50);
    clearInterval(time);
    }, 2000);
    }
    if(left == -300) {
    left = 0;
    }
    $box[0].style.left = left + 'px';
    }*/function scrollFun(obj) { /*function scrolls() {
    var $box = $('#box');
    var left = parseInt($box[0].style.left);
    left--;
    if(-left % 50 == 0) {
    clearInterval(timer);
    var time = setInterval(function() {
    timer = setInterval(scrolls, 50);
    clearInterval(time);
    }, 2000);
    }
    if(left == -300) {
    left = 0;
    }
    $box[0].style.left = left + 'px';
    }*/
    function scrolls(flag) {

    var $box = $('#box');
    var left = parseInt($box[0].style.left);
    var right = parseInt($box[0].style.right);

    if(!scrolls.data || !scrolls.data.size) {
    if(!scrolls.data || scrolls.data.right != 'right') {
    left--;
    if(-left % 50 == 0) {
    clearInterval(timer);
    time = setInterval(function() {
    timer = setInterval(scrolls, 50);
    clearInterval(time);
    }, 2000);
    }
    if(left == -300) {
    left = 0;
    }
    $box[0].style.left = left + 'px';
    } else {
    left = parseInt($box[0].style.left);
    left++;
    if(-left % 50 == 0) {
    clearInterval(timer);
    time = setInterval(function() {
    timer = setInterval(scrolls, 50);
    clearInterval(time);
    }, 2000);
    }
    if(left == 0) {
    left = -300;
    }
    $box[0].style.left = left + 'px';
    }
    } else {
    if(!scrolls.data || scrolls.data.right != 'right') {
    left--;
    if(-left % parseInt(scrolls.data.size.width) == 0) {
    clearInterval(timer);
    time = setInterval(function() {
    timer = setInterval(scrolls, 50);
    clearInterval(time);
    }, 2000);
    }
    if(left == -(parseInt(scrolls.data.size.width)*6)) {
    left = 0;
    }
    $box[0].style.left = left + 'px';
    } else {
    left = parseInt($box[0].style.left);
    left++;
    if(-left % parseInt(scrolls.data.size.width) == 0) {
    clearInterval(timer);
    time = setInterval(function() {
    timer = setInterval(scrolls, 50);
    clearInterval(time);
    }, 2000);
    }
    if(left == 0) {
    left = -(parseInt(scrolls.data.size.width)*6);
    }
    $box[0].style.left = left + 'px';
    }
    }


    }


    if(obj && obj.left == 'left') {
    scrolls.data = null;
    if(!obj.right || !obj.size) {
    timer = setInterval(scrolls, 50);
    }
    }
    else if(obj && obj.right == 'right') {
    if(obj.size) {
    $('#box')[0].style.left = '-' + (parseInt(obj.size.width)*6) + 'px';
    } else {
    $('#box')[0].style.left = '-300px';
    }
    scrolls.data = {right:'right'};
    if(!obj.size) {
    timer = setInterval(scrolls, 50);
    } 
    }
    if(obj && obj.size) {
    $('#content').css('width', (parseInt(obj.size.width)*6) + 'px');
    $('#box').css('width', (parseInt(obj.size.width)*12) + 'px');
    $('#box ul li').css('width', obj.size.width);
    scrolls.data = scrolls.data || {};
    scrolls.data.size = {width:obj.size.width};
    timer = setInterval(scrolls, 50);
    }
    }$(function() {
    $('#box')[0].innerHTML += $('#box')[0].innerHTML;
    scrollFun({
    //right:'right',
    left:'left'
    //size:{width:'100px'}
    });
    $('.btn').first().click(function() {
    clearInterval(timer);
    clearInterval(time);
    scrollFun({
    left:'left'
    });
    });
    $('.btn').eq(1).click(function() {
    clearInterval(timer);
    clearInterval(time);
    scrollFun({
    right:'right'
    });
    });
    });
    </script>
    </head><body>
    <div id='content' class='clearfix'>
    <div id='box' style='left:0;'>
    <ul>
    <li class='one'>1</li>
    <li class='two'>2</li>
    <li class='stree'>3</li>
    <li class='four'>4</li>
    <li class='five'>5</li>
    <li class='six'>6</li>
    </ul>
    </div>
    </div>
    <div>
    <button class='btn' value='向左'>向左</button><button class='btn' value='向右'>向右</button>
    </div>
    </body>
    </html>
    改动后，如何优化？