js图片滚动问题

前两天做个图片滚动效果，可是现在发现个问题1、当滚动的内容太短的时候就不滚动
2、滚动到出现右侧边界时就停止滚动
高手赐教
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head><body> <!--图片滚动代码开始-->
<span id="ademo" style="overflow:hidden;width:960px;">
 <span id="ademo1" align="center"> 
dddddddddddddddddddddddddddddddddddddddddddddddddddddd
dddddddddddddddddddddddddddddddddddddddddddddddddddddd
ddddddddddddddddddddddddddddddddddddddddddddddddd
</span> <span id="ademo2" style="visibility:hidden;"></span>
 </span>
<script language="javascript">
var speed=8;//速度数值越大速度越慢
var ademo2=document.getElementById("ademo2");
var ademo1=document.getElementById("ademo1");
var ademo=document.getElementById("ademo");  ademo2.innerHTML=ademo1.innerHTML;  function Marquee()
  {
showInfo();
  if(ademo2.offsetWidth-ademo.scrollLeft<=0)
  {
  ademo.scrollLeft-=ademo1.offsetWidth;
  }
  else
  {
   ademo.scrollLeft+=50;
  }
  }
  var MyMar=setInterval(Marquee,speed);
  //ademo.onmouseover=function() {clearInterval(MyMar)}
  //ademo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
  function showInfo()
  {
       document.getElementById("eee").innerHTML="ademo2.offsetWidth=" + ademo2.offsetWidth + "<br>" + "ademo.scrollLeft=" + ademo.scrollLeft +"<br>" + "ademo2.offsetWidth-ademo.scrollLeft=" + (ademo2.offsetWidth-ademo.scrollLeft).toString()+ "<br>" + "ademo2.offsetWidth-ademo.scrollLeft<=0 =" + (ademo2.offsetWidth-ademo.scrollLeft<=0).toString() + "<br>" + "ademo1.offsetWidth=" + ademo1.offsetWidth + "<br>" + "ademo.offsetWidth=" + ademo.offsetWidth;
   
  }
  function resetval()
  {
   ademo.scrollLeft=0;
  }
</script>
<div id="ddd"></div><input type="button" onClick="resetval()" value="=============" >
<div id="eee"></div>
<!--图片滚动代码结束--></body>
</html>

解决方案 »

  1.   

    http://blog.csdn.net/natineprince/archive/2009/04/30/4138260.aspx
    建议先看看各个定位参数代表什么
      

  2.   

    scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
    这个说的不够详细, 设定scroll时并不是跟设定left,top属性一样的随意设定, 而是跟dom结点之间的关系相关, 比如当字符太短时, scrollleft始终是0, 到右边时, 始终是最大值. 这个需要自己在使用的过程中多体会.解决方法是, ademo1设定position(absolute/relative均可), 然后通过操作left属性控制位置.
      

  3.   


    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head><body> <!--图片滚动代码开始-->
    <span id="ademo" style="height:30px;overflow:hidden;width:960px;">
    <span id=ademo_con>
    <span id="ademo1" align="center" style="height:20px;white-space:nowrap;float:left;display:inline">
    前两天做个图片滚动效果，可是现在发现个问题 
    1、当滚动的内容太短的时候就不滚动 
    2、滚动到出现右侧边界时就停止滚动
    前两天做个图片滚动效果，可是现在发现个问题 
    1、当滚动的内容太短的时候就不滚动 
    2、滚动到出现右侧边界时就停止滚动
    -- 
    </span>
    <span id="ademo2" style="height:20px;white-space:nowrap;float:left;display:inline"></span>
    </span></span>
    <script language="javascript">
    var speed=80;//速度数值越大速度越慢
    var ademo2=document.getElementById("ademo2");
    var ademo1=document.getElementById("ademo1");
    var ademo=document.getElementById("ademo");
    var ademo_con=document.getElementById("ademo_con");ademo2.innerHTML=ademo1.innerHTML;
    ademo_con.style.width=ademo2.offsetWidth*2+"px"
    function Marquee(){
      showInfo();
      if(ademo2.offsetWidth-ademo.scrollLeft<=0){
         ademo.scrollLeft-=ademo1.offsetWidth+260;
      }
      else{
         ademo.scrollLeft+=5;
      }
    }
      
    var MyMar=setInterval(Marquee,speed);
      //ademo.onmouseover=function() {clearInterval(MyMar)}
      //ademo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}function showInfo(){
      document.getElementById("eee").innerHTML="ademo2.offsetWidth=" + ademo2.offsetWidth + "<br>" + "ademo.scrollLeft=" + ademo.scrollLeft +"<br>" + "ademo2.offsetWidth-ademo.scrollLeft=" + (ademo2.offsetWidth-ademo.scrollLeft).toString();
    }function resetval(){
      ademo.scrollLeft=0;
    }
    </script>
    <div id="ddd"></div><input type="button" onClick="resetval()" value="=============" >
    <div id="eee"></div>
    <!--图片滚动代码结束--></body>
    </html>
      

  4.   

    caiying2009:function Marquee(){
      showInfo();
      if(ademo2.offsetWidth-ademo.scrollLeft<=0){
         ademo.scrollLeft-=ademo1.offsetWidth+260;
      }
      else{
         ademo.scrollLeft+=5;
      }
    }
      
    你这里的260哪里来的？
    如果我换个宽度，是不是还需要重新设这个值？
      

  5.   

    <span id="ademo" style="overflow:hidden;width:960px;">
    960px换小点100px，滚动的内容的宽度要大于滚动容器的宽度