首页 > 关于JS无缝滚动方面的问题;求大神指教

关于JS无缝滚动方面的问题;求大神指教

下面是我的代码,求大神帮我看看我哪里写错了;
我要的效果是;默认情况UI是向右滚动。然后当我点击左上角的 向左走 时,弹出对话窗口。在对话窗口里输入 滚动的速度,然后点击确定,UI就可以向左或向右以在对话窗口里输入的数值的速度来滚动;但我现在在对话窗口里输入数值点击确定后,UI就不停的闪。。。。请大神帮我看一下我哪里写错了。谢谢哈;
这个是我代码的DEMO
http://psgui.com/JS%E5%AD%A6%E4%B9%A0/0008.html

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            *{
                margin:0px;
                padding:0px;
            }
            .gun_box1{
                height:100px;
                background-color:#998811;
                position:relative;
                margin:20px auto;
                overflow:hidden;
            }
            .gun_box1 ul{
                position:absolute;
                top:0;
                left:0;
                /*width:1000px;*/
                
            }
            .gun_box1 ul li{
                float:left;
                margin-right:10px;
                width:100px;
                height:100px;
                background-color:#118833;
                list-style-type:none;
                white-space:nowrap;
            }
            #bai{
                color:#000000;
                background-color:#ffff33;
            }
        </style>
        
        <script>
            function getCSS(obaj, nade){  //字义一个函数,获取样式表里面类里的属性于值;obaj指的是对角,nade属性名称
            if(obaj.currentStyle){
                return obaj.currentStyle[nade];
            }
            else{
                return getComputedStyle(obaj, false)[nade];
            }
        };

            window.onload = function(){
                var odiv_box1 = document.getElementById('odiv_1');
                var oul_box1 = odiv_box1.getElementsByTagName('ul')[0];
                var oli_box1 = oul_box1.getElementsByTagName('li');
                var oInput_left = document.getElementById('input_left1');
                var oInput_right = document.getElementById('input_right1');
                var input_timed1 = document.getElementById('input_timed');
                var zheng = -4;
                var timed = 3000;
                
                oul_box1.innerHTML = oul_box1.innerHTML + oul_box1.innerHTML;  //复制一份LI出来
                oul_box1.style.width = (oli_box1[0].offsetWidth*oli_box1.length) + (parseInt(getCSS(oli_box1[0], 'marginRight')) * oli_box1.length) + 'px';     //让UL的宽度等于每个LI的单个宽度*LI的个数 + marginRight*li的个数;
                odiv_box1.style.width = parseInt(oul_box1.style.width) / 2 + 'px';  //将oul_box1的宽度获取到并转换为数字然后除2,再赋值给odiv_box1的宽度
                //alert(parseInt(oul_box1.style.width) / 2);   //parseInt();将字符串转换为数字
                //alert(oli_box1[0].offsetWidth*oli_box1.length);
                //alert(parseInt(getCSS(oli_box1[0], 'marginRight')) * oli_box1.length ); //获取 oli_box1 样式表 .gun_box1 ul li 中 margin-right 的值后将期转换为                                                                                           //数后,然后* oli_box1的个数;
                var steds = null;
                function moyou(){
                    if(oul_box1.offsetLeft <- oul_box1.offsetWidth/2){  //oul_box1的offsetLeft 小余并减 oul_box1.offsetWidth二分之一时oul_box1的left值为0;
                        oul_box1.style.left = '0';
                    }
                    if(oul_box1.offsetLeft > 0){  //如果向右移动的话就是oul_box1的offsetLeft大于0的时候实行里面的语句;
                       oul_box1.style.left =-oul_box1.offsetWidth/2 + 'px'; //如果oul_box1.offsetLeft大余0就让oul_box1的left等于负的oul_box1.offsetWidth的2分之一
                    }
                    oul_box1.style.left = oul_box1.offsetLeft + zheng +'px';  //oul_box1每XX毫秒向左移动 zheng 个像素;
                }
                steds = setInterval(moyou, timed);
                odiv_box1.onmouseover = function(){
                    clearTimeout(steds);
                };
                odiv_box1.onmouseout = function(){
                    steds = setInterval(moyou, timed);
                };
                //下面的代码是点击向左走后弹出对话窗口,在对话窗口里输入速度点击确定后,把输入的速度值赋给变量zheng; 
                oInput_left.onclick = function(){  
                    var pros= prompt('请输入速度','这里输入');
                    if(pros){
                        zheng=parseInt(-pros);//点击后向左走
                    }
                };
                oInput_right.onclick = function(){
                    var pros=prompt('请输入速度', '这里输入');
                    if(pros){
                        zheng=parseInt(pros);//点击后向右走
                    }
                };
                input_timed1.onclick = function(){
                    var timed_speed=prompt('请输入时间1000=1秒', timed);
                    if(timed_speed){
                        timed=parseInt(timed_speed);
                    }
                    alert(timed);
                };

            };
        </script>
    </head>
    <body>
        <input type="button" value="向左走" id="input_left1">
        <input type="button" value="向右走" id="input_right1">
        <input type="button" value="生隔几秒滚动一次" id="input_timed">
        <div class="gun_box1" id="odiv_1">
            <ul>
                <li id="bai"><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li><a href="#">6</a></li>
                <li><a href="#">7</a></li>
                <li><a href="#">8</a></li>
                <li><a href="#">9</a></li>
            </ul>
        </div>
    </body>
</html>

1)oul_box1.offsetLeft <- oul_box1.offsetWidth/2是什么操作?
2)setInterval设置的定时器,对应的要用clearInterval来取消clearInterval
3) oInput_left.onclick后你只是设置了一个变量,然后然后呢~~~~


if(pros){// 这是你的pros是一个字符串
    zheng = +pros;   
}
alert(zheng);
【热门文章】
【热门文章】