图片的连续滚动问题?

<body topmargin="0" leftmargin="0" bgcolor=#EBF2FC style="overflow:hidden;margin-right: 0;padding-left: 0">
<div id=demo style=overflow:hidden;height:88px;width:800px;>
<table  cellpadding=0 cellspace=0 border=0 width=100% >
<tr>
<td id=demo1 valign=top >
<table cellSpacing="3" cellPadding="7" border="0" height="83">
<tr>
<td vAlign="middle" align="center" width="109" background="skin/images/tu.jpg"><A href="javascript:void(0)"><IMG height="72" src="skin/images/tu1.jpg" width="99" border="0"></A>
</td> <td vAlign="middle" align="center" width="109" background="skin/images/tu.jpg"><A href="javascript:void(0)"><IMG height="71" src="skin/images/tu2.jpg" width="98" border="0"></A>
</td>

<td vAlign="middle" align="center" width="109" background="skin/images/tu.jpg"><A href="javascript:void(0)"><IMG height="71" src="skin/images/tu3.jpg" width="97" border="0"></A>
</td>

<td vAlign="middle" align="center" width="109" background="skin/images/tu.jpg"><A href="javascript:void(0)"><IMG height="72" src="skin/images/tu4.jpg" width="98" border="0"></A>
</td> <td vAlign="middle" align="center" width="109" background="skin/images/tu.jpg"><A href="javascript:void(0)"><IMG height="70" src="skin/images/tu5.jpg" width="95" border="0"></A>
</td> <td vAlign="middle" align="center" width="109" background="skin/images/tu.jpg"><A href="javascript:void(0)"><IMG height="72" src="skin/images/tu1.jpg" width="99" border="0"></A>
</td> <td vAlign="middle" align="center" width="109" background="skin/images/tu.jpg"><A href="javascript:void(0)"><IMG height="71" src="skin/images/tu2.jpg" width="98" border="0"></A>
</td> <td vAlign="middle" align="center" width="109" background="skin/images/tu.jpg"><A href="javascript:void(0)"><IMG height="71" src="skin/images/tu3.jpg" width="97" border="0"></A>
</td> <td vAlign="middle" align="center" width="109" background="skin/images/tu.jpg"><A href="javascript:void(0)"><IMG height="72" src="skin/images/tu4.jpg" width="98" border="0"></A>
</td> <td vAlign="middle" align="center" width="109" background="skin/images/tu.jpg"><A href="javascript:void(0)"><IMG height="70" src="skin/images/tu5.jpg" width="95" border="0"></A>
</td>
</tr>
</table>
</td>
<td id=demo2 valign=top ></td>
</tr>
</table>
</div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee(){
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>   
</body>

解决方案 »

  1.   

    参考:<div id="article1" style="width:530px;height:204px !important;height:121px;" >
    <table width="100" border="0" cellspacing="0" cellpadding="0">
      <tr>  
        <td><a href="#" target="_blank"><img src="/images/product_banner_1_01.jpg" alt="" width="103" height="120" border="0"></a></td>
        <td><a href="#" target="_blank"><img src="/images/product_banner_1_02.jpg" alt="" width="106" height="120" border="0"></a></td>
        <td><a href="#" target="_blank"><img src="/images/product_banner_1_03.jpg" alt="" width="106" height="120" border="0"></a></td>
        <td><a href="#" target="_blank"><img src="/images/product_banner_1_04.jpg" alt="" width="106" height="120" border="0"></a></td>
        <td><a href="#" target="_blank"><img src="/images/product_banner_1_05.jpg" alt="" width="109" height="120" border="0"></a></td>
      </tr>
    </table>
    <table width="100" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td><a href="#" target="_blank"><img src="/images/product_banner_2_01.jpg" alt="" width="103" height="120" border="0"></a></td>
        <td><a href="#" target="_blank"><img src="/images/product_banner_2_02.jpg" alt="" width="106" height="120" border="0"></a></td>
        <td><a href="#" target="_blank"><img src="/images/product_banner_2_03.jpg" alt="" width="106" height="120" border="0"></a></td>
        <td><a href="#" target="_blank"><img src="/images/product_banner_2_04.jpg" alt="" width="106" height="120" border="0"></a></td>
        <td><a href="#" target="_blank"><img src="/images/product_banner_2_05.jpg" alt="" width="109" height="120" border="0"></a></td>
      </tr>
    </table>
    <table width="100" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td><a href="#" target="_blank"><img src="/images/product_banner_3_01.jpg" alt="" width="103" height="120" border="0"></a></td>
        <td><a href="#" target="_blank"><img src="/images/product_banner_3_02.jpg" alt="" width="106" height="120" border="0"></a></td>
        <td><a href="#" target="_blank"><img src="/images/product_banner_3_03.jpg" alt="" width="106" height="120" border="0"></a></td>
        <td><a href="#" target="_blank"><img src="/images/product_banner_3_04.jpg" alt="" width="106" height="120" border="0"></a></td>
        <td><a href="#" target="_blank"><img src="/images/product_banner_3_05.jpg" alt="" width="109" height="120" border="0"></a></td>
      </tr>
    </table>
    </div>
    <div id="article2" style="position:absolute;z-index:1;visibility:hidden"></div>
    <script>
    articleHeight=120;
    stopscrolla=false;
    article1.scrollTop=1;
    with(article1){
      style.width=0;
      style.height=articleHeight;
      style.overflowX="visible";
      style.overflowY="hidden";
      noWrap=true;
      onmouseover=new Function("stopscrolla=true");
      onmouseout=new Function("stopscrolla=false");
    }
    preTopa=0; currentTopa=0; stoptimea=0;
    function init_srolltext1(){
      article2.innerHTML="";
      article2.innerHTML+=article1.innerHTML;    
      article1.innerHTML=article2.innerHTML+article2.innerHTML;
      setInterval("scrollUp1()",16);
    }
    function scrollUp1(){
      if(stopscrolla==true) return;
      currentTopa+=1;
      if(currentTopa==121)
      {
       stoptimea+=1;
       currentTopa-=1;
       if(stoptimea==90) 
       {
        currentTopa=0;
        stoptimea=0;
       }
      }
      else {   
       preTopa=article1.scrollTop;
       article1.scrollTop+=1;
       if(preTopa==article1.scrollTop){
         article1.scrollTop=article2.offsetHeight-articleHeight;
         article1.scrollTop+=1;
       }
      }
    }
    init_srolltext1();
    </script>
      

  2.   

    <textarea id="txt" style="display: none">
                  <img src="img/001.jpg">
                  <img src="img/002.jpg">
                  <img src="img/003.jpg">
                  <img src="img/004.jpg">
                  <img src="img/005.jpg">
                  <img src="img/006.jpg">
                  <img src="img/007.jpg">
                  <img src="img/008.jpg">
                  <img src="img/009.jpg"> 
        </textarea>    
    <script language="JavaScript1.2">
    <!--
    var sliderwidth=720
    var sliderheight=90
    var slidespeed=4
    var leftrightslide=new Array()
    var finalslide=''
    var leftrightslide=document.getElementById("txt").value.split("\n");
    var copyspeed=slidespeed
    for (i=0;i<leftrightslide.length;i++)
    finalslide=finalslide+leftrightslide[i]+"&nbsp;&nbsp;"
    if (document.all){
    document.write('<marquee id="ieslider" scrollAmount=0 style="width:'+sliderwidth+'">'+finalslide+'</marquee>')
    ieslider.onmouseover=new Function("ieslider.scrollAmount=0")
    ieslider.onmouseout=new Function("if (document.readyState=='complete') ieslider.scrollAmount=slidespeed")
    }function regenerate(){
    window.location.reload()
    }
    function regenerate112(){
    if (document.layers){
    document.ns_slider01.visibility="show"
    setTimeout("window.onresize=regenerate",450)
    intializeleftrightslide()
    }
    if (document.all)
    ieslider.scrollAmount=slidespeed
    }function intializeleftrightslide(){
    document.ns_slider01.document.ns_slider02.document.write('<nobr>'+finalslide+'</nobr>')
    document. ns_slider01.document.ns_slider02.document.close()
    thelength=document.ns_slider01.document.ns_slider02.document.width
    scrollslide()
    }function scrollslide(){
    if (document.ns_slider01.document.ns_slider02.left>=thelength*(-1)){
    document.ns_slider01.document.ns_slider02.left-=slidespeed
    setTimeout("scrollslide()",100)
    }
    else{
    document.ns_slider01.document.ns_slider02.left=sliderwidth
    scrollslide()
    }
    }
    window.onload=regenerate112//-->
    </script>
    <ilayer width=&{sliderwidth}; height=&{sliderheight}; name="ns_slider01" visibility=hide>
    <layer name="ns_slider02" onMouseOver="slidespeed=0;" onMouseOut="slidespeed=copyspeed">
    </layer>
    </ilayer>
    我这边的代码是这样的，我想在原基础上改，如何来改？还请各位大侠再指点一下，谢谢！
      

  3.   

    我这边有一段代码，但不知改如何改，才能首尾相接连续滚动，麻烦各位大侠指教一下
    <textarea id="txt" style="display: none">
                  <img src="img/001.jpg">
                  <img src="img/002.jpg">
                  <img src="img/003.jpg">
                  <img src="img/004.jpg">
                  <img src="img/005.jpg">
                  <img src="img/006.jpg">
                  <img src="img/007.jpg">
                  <img src="img/008.jpg">
                  <img src="img/009.jpg"> 
        </textarea>    
    <script language="JavaScript1.2">
    <!--
    var sliderwidth=720
    var sliderheight=90
    var slidespeed=4
    var leftrightslide=new Array()
    var finalslide=''
    var leftrightslide=document.getElementById("txt").value.split("\n");
    var copyspeed=slidespeed
    for (i=0;i<leftrightslide.length;i++)
    finalslide=finalslide+leftrightslide[i]+"&nbsp;&nbsp;"
    if (document.all){
    document.write('<marquee id="ieslider" scrollAmount=0 style="width:'+sliderwidth+'">'+finalslide+'</marquee>')
    ieslider.onmouseover=new Function("ieslider.scrollAmount=0")
    ieslider.onmouseout=new Function("if (document.readyState=='complete') ieslider.scrollAmount=slidespeed")
    }function regenerate(){
    window.location.reload()
    }
    function regenerate112(){
    if (document.layers){
    document.ns_slider01.visibility="show"
    setTimeout("window.onresize=regenerate",450)
    intializeleftrightslide()
    }
    if (document.all)
    ieslider.scrollAmount=slidespeed
    }function intializeleftrightslide(){
    document.ns_slider01.document.ns_slider02.document.write('<nobr>'+finalslide+'</nobr>')
    document. ns_slider01.document.ns_slider02.document.close()
    thelength=document.ns_slider01.document.ns_slider02.document.width
    scrollslide()
    }function scrollslide(){
    if (document.ns_slider01.document.ns_slider02.left>=thelength*(-1)){
    document.ns_slider01.document.ns_slider02.left-=slidespeed
    setTimeout("scrollslide()",100)
    }
    else{
    document.ns_slider01.document.ns_slider02.left=sliderwidth
    scrollslide()
    }
    }
    window.onload=regenerate112//-->
    </script>
    <ilayer width=&{sliderwidth}; height=&{sliderheight}; name="ns_slider01" visibility=hide>
    <layer name="ns_slider02" onMouseOver="slidespeed=0;" onMouseOut="slidespeed=copyspeed">
    </layer>
    </ilayer>