javascript js 图片滚动 setInterval

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Test </title></head>
<body>
<div id='demo1' style="display:none">
<table>
     <tr>
         <td><img src="/img/link1.gif" /></td>
<td><img src="/img/link2.gif" /></td>
            <td><img src="/img/link3.gif" /></td>
            <td><img src="/img/link4.gif" /></td>
        </tr>
    </table>
</div>
<div id='demo2' style='overflow:hidden;height:150;width:500'> </div>
<div id="con"></div>
<script>
var speed=50;
var demo1 = document.getElementById("demo1");
var demo2 = document.getElementById("demo2");
demo2.innerHTML=demo1.innerHTML;
//alert(demo2.offsetLeft+1);
//alert(demo.scrollLeft+1);
var left = 0;
var flag = true;
function Marquee(){
if(flag){
demo2.scrollLeft += 50;
}else{
demo2.scrollLeft -= 50;
}
//判断是否需要转向
if(left == demo2.scrollLeft){
flag = !flag;
}
left = demo2.scrollLeft;
}
var MyMar=setInterval(Marquee,speed);
demo2.onmouseover=function() {clearInterval(MyMar)};
demo2.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
</script> </body>
</html> 

解决方案 »

  1.   

    把图片的src定义成一个数组，用setInterval切换一下
      

  2.   

    to  kakaxi
    还是不行，我那个主要是demo.scrollLeft++; 
    改变不了啊
      

  3.   

    news.tom.com有个？
    是什么意思啊？你们可以告诉我
    执行了
    demo.scrollLeft++; 
    之后，
    为什么demo.scrollLeft的值还是0呢？
      

  4.   

    你加上 
    function   Marquee(){ 
      window.status=demo2.scrollLeft+ "| "+demo2.offsetLeft+ "| "+demo.scrollLeft+ "| "+demo.offsetLeft 运行时看看状态栏先自己动手，好过别人解释。
      

  5.   

    <div id=demo style=overflow:hidden;height:150;width:500;background:#214984;color:#ffffff> 
    <table><tr><td width="501"><div id=demo1 style="float:left;width:501;"> 
    <!-- 定义图片 --> 
    <img src="/img/link.gif"> 1
    <img src="/img/link1.gif"> 2
    <img src="/img/link2.gif"> 3
    <img src="/img/link3.gif"> 4
    <img src="/img/link4.gif"> 5
    </div> 
    </td><td width="501">
    <div id=demo2 style="float:left;width:501;"> </div> 
    </td></tr></table>
    </div> 
    <script> 
    var speed=100 
    demo2.innerHTML=demo1.innerHTML 
    function Marquee(){ 
    window.status=demo2.scrollLeft+ "| "+demo2.offsetLeft+ "| "+demo.scrollLeft+ "| "+demo.offsetLeft
    if(demo2.offsetWidth-demo.scrollLeft <0) 
    { 
    demo.scrollLeft-=demo1.offsetWidth;
    } 
    else 
    {  
    demo.scrollLeft++; 
    } 
    } 
    var MyMar=setInterval(Marquee,speed) 
    demo.onmouseover=function() {clearInterval(MyMar)} 
    demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)} 
    </script>首先，demo的overflow:hidden，即超出的内容不显示。
    再，demo1和demo2要横排，且宽度要大于demo宽度。
    剩下的自己运行看状态栏。
      

  6.   

    slowhand
    可以说说为什么一定要用table啊？
    我的代码没错！是因为布局所以不行吧？
      

  7.   

    demo1和demo2要横向排列，div默认竖排。试了下float:left好像不好用。代码if(demo2.offsetWidth-demo.scrollLeft <0)这句应该是offsetWidth
      

  8.   

    先谢谢
    slowhand
    其实这里我应该先把那些宽度弄清楚先。这样再关心那些布局。
    看你的例子就够啦！谢谢