关于图片无缝隙滚动的问题！

百度了一下出来的都是这个很传统的做法。
结构如下<div id="demo" style="width:800px;overflow:hidden">
<table><tr><td id="demo1">要显示的内容</td><td id="demo2"></td></tr></table>
</div>
将demo1的内容克隆一份到demo2
然后不断改变demo的scrollLeft，当滚动的宽度刚好是demo1的宽度时还原一下。
由于demo2里克隆了demo1的内容，还原的瞬间是看不出来的，从而达到“无缝”滚动的目的。
现在的问题就是当demo1的宽度小于demo的宽度的时候，滚动一会就停止了。
demo1的宽度大于demo的宽度的时候是没问题的。
我现在就是想弄清楚问题出在什么地方，调试了下发现应该没有问题才对。

解决方案 »

  1.   

    你是想了解这个代码实现过程，还是只要实现功能就可以了，如果是实现功能，直接在网上下载一个JQuery的插件就行了，很多的
      

  2.   


    在贴上jsvar speed = 25;
    document.getElementById("demo2").innerHTML = document.getElementById("demo2").innerHTML;
    var MyMar = setInterval(Marquee, speed);
    document.getElementById("demo").onmouseover = function ()
            { clearInterval(MyMar);  }
    document.getElementById("demo").onmouseout = function ()
            { MyMar = setInterval(Marquee, speed);}
    function Marquee() {
                if (document.getElementById("demo2").offsetWidth - document.getElementById("demo").scrollLeft <= 0) {
                    document.getElementById("demo").scrollLeft -= document.getElementById("demo1").offsetWidth
                }
                else {
                    document.getElementById("demo").scrollLeft++
                }
            }
      

  3.   

    我现在是想了解出现这个问题的原来的。
    原因是：如果“demo1”的宽度设置得比“demo”的小，造成在进行“document.getElementById("demo").scrollLeft -= document.getElementById("demo1").offsetWidth; ”这一步运算时，“demo”的“scrollLeft”属性值比document.getElementById("demo2").offsetWidth的值要小，所以“ if (document.getElementById("demo2").offsetWidth - document.getElementById("demo").scrollLeft <= 0)”的运算结果总是为false，也就是大于0的，因此也就不停的在执行“document.getElementById("demo").scrollLeft++;”语句，但是呢，“scrollLeft”的值是有上限的，所以反映到页面上，你就看到的是卡着不动了。
      

  4.   

    根据测试，不是说demo1的宽度只要比demo小就会出现问题，而是达到一定差值时才会出现你说的问题。并且demo宽度、table的宽度、demo1的宽度，要相互配合才能达到比较满意的效果。这个我就没具体去寻根究底了。如果是在项目中应用，建议还是去找比较稳定的插件来做，减少风险，而且有源代码的，可以研究它实现的思路。
      

  5.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CSS等高布局</title>
    <style type="text/css">
    body { margin:0; padding:0; }
    ul,li { margin:0; padding:0; }
    ul li { float:left; width:100px; }
    ul { list-style:none; float:left; width:300px; }
    #box { width:300px; overflow:hidden; position:relative; background:#f00; height:100px; }
    #boxframe { width:600px; position:absolute; top:0; }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
    function scrolls() {
        if(parseInt($('#boxframe').css('left')) == -300) { 
            $('#boxframe').css('left', 0)
        }
       $('#boxframe').animate({left: '-=100px'}, 500);
    }
    var timer;
    $(function() {
        $('ul').clone().appendTo('#boxframe');
        timer = setInterval('scrolls()', 2000);   
        $('#boxframe').hover(function() {
            clearInterval(timer);                         
        }, function() {
            timer = setInterval('scrolls()', 2000);   
        });
    });
    alert(a);
    </script>
    </head>
    <body>
    <div id="box">
        <div id="boxframe">
            <ul>
                <li><a href="#" target="_blank"><img src="1.jpg" width="100" height="100" /></a></li>
                <li><a href="#" target="_blank"><img src="2.gif" width="100" height="100" /></a></li>
                <li><a href="#" target="_blank"><img src="3.gif" width="100" height="100" /></a></li>
            </ul>
             
        </div>
    </div>
    </body>
    </html>