这段代码的功能是使图片首尾相接不间断向左移动，为什么移动2次就停止移动了

这段代码的功能是使图片首尾相接不间断向左移动，为什么移动2次就停止移动了<!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>
    <title></title>
<style type="text/css">
body{margin:0px auto; padding:0px;}
ul,li{margin:0px; padding:0px;list-style.:none;}
.sqBorder {width:945px; height:96px; padding:10px; border:1px #000000 solid; background:#c60000;}
.scroll_div {width:945px; height:95px;margin:0 auto; overflow: hidden; white-space: nowrap; background:#c60000;}
.scroll_div img {width:120px;height:94px;border: 0;margin: auto 2px; border:1px #efefef solid; cursor:pointer;}
#scroll_begin, #scroll_end, #scroll_begin ul, #scroll_end ul, #scroll_begin ul li, #scroll_end ul li{display:inline;}
</style>
    <script type="text/javascript">
        function ScrollImgLeft() {
            var speed = 20
            var scroll_begin = document.getElementById("scroll_begin");
            var scroll_end = document.getElementById("scroll_end");
            var scroll_div = document.getElementById("scroll_div");
            scroll_end.innerHTML = scroll_begin.innerHTML
            function Marquee() {
                if (scroll_end.offsetWidth - scroll_div.scrollLeft <= 0)
                    scroll_div.scrollLeft -= scroll_begin.offsetWidth
                else
                    scroll_div.scrollLeft++
            }
            var MyMar = setInterval(Marquee, speed)
            scroll_div.onmouseover = function() { clearInterval(MyMar) }
            scroll_div.onmouseout = function() { MyMar = setInterval(Marquee, speed) }
        }
    </script>
</head>
<body>
<h2 align="center">向左滚动</h2>
<div style="text-align:center">
<div class="sqBorder">
<div id="scroll_div" class="scroll_div">
<div id="scroll_begin">
<ul>
<li><img src='img/t1-thmb.jpg' /></li>
<li><img src='img/t2-thmb.jpg' /></li>
<li><img src='img/t3-thmb.jpg' /></li>
<li><img src='img/t4-thmb.jpg' /></li>
<li><img src='img/t5-thmb.jpg' /></li>
<li><img src='img/t7-thmb.jpg' /></li>
<li><img src='img/t8-thmb.jpg' /></li>
</ul>
</div>
<div id="scroll_end"></div>
</div>
</div>
<script type="text/javascript">ScrollImgLeft();</script>
</div>
</body>
</html>

解决方案 »

  1.   


    .scroll_div img {width:130px;height:94px;border: 0;margin: auto 2px; border:1px #efefef solid; cursor:pointer;}增加width:130px的宽度，或者增加margin：auto 10px;
    具体原因，不太清楚，
    自己理解是，就像是滚动条一样，也是有限度的移动范围，当移动到最左边时scroll_div.scrollLeft就不再增加了，方法就是增加scroll_div的宽度，
    希望对你有帮助，也希望高手能解释清楚
      

  2.   

    中午我在网上找到一个很简洁也很好的代码，与大家共享。http://www.bolesoft.com/chinese/readarticle.asp?art_id=11一般的滚动字幕都是利用HTML的MARQUEE标记来实现，确实非常方便，但有一点不足就是在其尾部有一段空白要等空白走完才能循环，我前也曾介绍过不间的图片滚动效果制作方法，但代码较长，改变参数也比较麻烦。本文所讲的方法，操作简单，改动方便，代码也少得多，减少了网页的负担，是一个瘦身的不间断滚动图片方法。制作方法如下：一、在<head>与</head>之间插入以下代码：<SCRIPT LANGUAGE=javascript>
    <!--
    function movepic(){
    try{
    var str=marqueeStr.innerText;
    var intLen1=str.length;
    var intLen2=marqueeStr.offsetWidth;
    var j=intLen2/intLen1;
    var strTemp=marqueeStr.innerHTML;
    if(j>1){
    for(i=0;i<j;i++)
    strTemp+=" "+marqueeStr.innerHTML;
    }
    marqueeStr.innerHTML=strTemp;}
    catch(e){}
    }
    //-->
    </SCRIPT>二、在你要插入滚动条的地方插入以下代码：<table width="261" align="center" >
    <tr>
    <td><marquee behavior="ALTERNATE" Direction="right" scrolldelay="100" id="marqueeStr" height="150" 
    width="100%" loop="-1" truespeed onMouseOver="this.stop();" onMouseOut="this.start();">
    <a href="http://fym888.nease.net"><img src="../../image/cflogo3.gif" width="120" height="50" border="0"></a>
    <a href="http://fym888.nease.net"><img src="../../image/cflogo3.gif" width="120" height="50" border="0"></a>
    <a href="http://fym888.nease.net"><img src="../../image/cflogo3.gif" width="120" height="50" border="0"></a> 
    <a href="http://fym888.nease.net"><img src="../../image/cflogo3.gif" width="120" height="50" border="0"></a>
    </marquee></td>
    </tr>
    </table>三、在<body>加上代码onload=movepic()，即这样：<body onload=movepic()>
    再按上面的说明修改成你要在滚动字幕中显示的内容一切OK！说明：1、改变滚动方向：改变Direction的值就可改变滚动方向，Direction="right"表示向右滚动； Direction="left"表示向左滚动等。
    2、改变scrolldelay 的值可以改变滚动速度，值越大滚动的越慢。