js 仿 marquee 能实现左右滚动并控制次数吗

Question

RT:现有向左滚动效果js代码  可以修改成左右滚动并控制次数吗<script  type="text/javascript">
                 var speed=10//速度数值越大速度越慢
                              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> 

Answer 1

<div id=demo style="position:absolute;width:30px;height:30px;border:1px solid blank;z-index:1;">0</div>
<div id=demo1 style="position:absolute;width:300px;height:300px;border:1px solid blank;z-index:0;">1</div>
<div id=demo2 style="position:absolute;width:300px;height:300px;border:1px solid blank;z-index:0;">2</div>
<input id=txt1 style="position:absolute;left:310px;">
<script  type="text/javascript">
     var speed=10;
     var cnt=2,cur=0;//滚动次数
     var demo=document.getElementById("demo");
     var demo1=document.getElementById("demo1");
     var demo2=document.getElementById("demo2");
     var flg=1;/左右滚动flg 1:Right, -1:Left
     
     demo2.innerHTML=demo1.innerHTML;
     demo.style.left=demo2.offsetLeft;
     function Marquee(){
        if(demo2.offsetWidth+demo2.offsetLeft-parseInt(demo.style.left||0)-parseInt(demo.style.width||0)<=0||
           parseInt(demo.style.left||0)<demo2.offsetLeft){
           flg=-flg;
           cur+=0.5;
           if(cur>cnt)clearInterval(MyMar);
         }
         demo.style.left=parseInt(demo.style.left||demo2.offsetLeft)+flg;
         document.getElementById("txt1").value=demo2.offsetLeft;
     }
     var MyMar=setInterval(Marquee,speed)
     demo.onmouseover=function() {clearInterval(MyMar);}
     demo.onmouseout=function() {MyMar=setInterval(Marquee,speed);}
</script> 

Answer 2

我的代码应该怎么修改
<div style="text-align:center">
<div id="demo" style="OVERFLOW: hidden; WIDTH: 800px; COLOR: #ffffff; text-align:center;">
<table  border="0" width="680" height="150" cellSpacing="0" cellPadding="0" align="center" cellspace="0">
<tbody>
<tr>
<td id="demo1" width="680" vAlign="top">
<asp:DataList id="DataList1" runat="server" RepeatColumns="21">
                                            <ItemTemplate>
<table style="height:228px"><tr><td>
        <table  border="0"><tr><td align='center' valign="bottom"><span style="font-size:9pt;COLOR: <%=forecolor %>;"><%# title(DataBinder.Eval(Container.DataItem, "wlbooks02").ToString(),9)%></span></td></tr></table>
        <table  border="0" cellSpacing='3' cellpadding='2'><tr>
            <td align='center' style="width:130px;height:155px;"><%# sy(DataBinder.Eval(Container.DataItem, "wlbooks05").ToString(), DataBinder.Eval(Container.DataItem, "wlbooks02").ToString())%></td>
        </tr></table>
        <table  border="0"><tr><td align='center' valign="top"><span style="font-size:9pt;COLOR: <%=forecolor %>;"><%# DataBinder.Eval(Container.DataItem, "wlbooks24")%>&nbsp;</span></td></tr></table>
        </td></tr></table>
</ItemTemplate>
</asp:DataList>
</td>
<td id="demo2" vAlign="top">
</td> </tr>
</tbody>
</table>
</div>
<script  type="text/javascript">
                              var speed = document.getElementById('Hidden1').value;
                              //var speed=10//速度数值越大速度越慢
                              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> 
</div>

Answer 3

<script  type="text/javascript">
      var cs = 4;//次数
                              var speed = 10;//速度
                              var b = 0;//标示变量
                              var n = 0;//计数变量
                              var speed=10//速度数值越大速度越慢
                                  demo2.innerHTML=demo1.innerHTML
                              demo.scrollLeft=demo.scrollWidth
                              
                              function Marquee(){                              
                              //向左移
                                  if(b == 0)
                                  {
                                      if(demo2.offsetWidth-demo.scrollLeft<0)
                                      {
                                            demo.scrollLeft-=demo1.offsetWidth
                                      }
                                      else if(demo2.offsetWidth-demo.scrollLeft==0)
                                      {
                                            b = 1
                                            n = n + 1
                                            demo.scrollLeft = demo2.offsetWidth
                                      }
                                      else if(demo2.offsetWidth-demo.scrollLeft>0)
                                      {
                                            demo.scrollLeft++
                                      }
                                  }
                              //向又移
                                  if(b == 1)
                                  {
                                      if(demo.scrollLeft<0)
                                      {
                                            demo.scrollLeft+=demo2.offsetWidth
                                      }
                                      else if(demo.scrollLeft=0)
                                      {
                                            b = 0
                                            n = n + 1
                                            demo.scrollLeft = demo2.offsetWidth
                                      }
                                      else if(demo.scrollLeft>0)
                                      {
                                            demo.scrollLeft--
                                      }
                                  }
                              //循环次数达到
                                  if(n == cs)
                              {
                                  //  
                              }
                              }
                              var MyMar=setInterval(Marquee,speed)
                              demo.onmouseover=function() {clearInterval(MyMar)}
                              demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
                        </script> 

Answer 4

<div id="demo" style="OVERFLOW: hidden; WIDTH: 800px; COLOR: #ffffff; text-align:center;">
<table  border="0" width="680" height="150" cellSpacing="0" cellPadding="0" align="center" cellspace="0">
<tbody>
<tr>
<td id="demo1" width="680" vAlign="top">
<table width="1024" border="0" align="center" cellpadding="0" cellspacing="0">
     <tr>
    <td width="250"><img src="images/book/book1.jpg" width="150" height="200"></td>
    <td width="250"><img src="images/book/book2.jpg" width="150" height="200"></td>
    <td width="250"><img src="images/book/book3.jpg" width="150" height="200"></td>
    <td width="250"><img src="images/book/book4.jpg" width="150" height="200"></td>
    <td width="250"><img src="images/book/lingdao.jpg" width="150" height="200"></td>
    <td width="250"><img src="images/book/shiya.jpg" width="150" height="200"></td>
    <td width="250"><img src="images/book/leshi.jpg" width="150" height="200"></td>
    <td width="250"><img src="images/book/hei.jpg" width="150" height="200"></td>
    <td width="250"><img src="images/book/riben.jpg" width="150" height="200"></td>
    <td width="250"><img src="images/book/xiaoyoushang.jpg" width="150" height="200"></td>
    <td width="250"><img src="images/book/siwei.jpg" width="150" height="200"></td>
    </tr>    
    <tr>
    <td width="250" align="center">文字标签1</td>
    <td width="250" align="center">文字标签2</td>
    <td width="250" align="center">文字标签3</td>
    <td width="250" align="center">文字标签4</td>
    <td width="250" align="center">文字标签5</td>
    <td width="250" align="center">文字标签6</td>
    <td width="250" align="center">文字标签7</td>
    <td width="250" align="center">文字标签8</td>
    <td width="250" align="center">文字标签9</td>
    <td width="250" align="center">文字标签0</td>
    <td width="250" align="center">文字标签11</td>
    </tr>    
    </table> 
</td>
<td id="demo2" vAlign="top">
</td>
</tr>
</tbody>
</table>
</div>
<script  type="text/javascript">
var cs = 4;//次数                     
var b = 0;//标示变量
var n = 0;//计数变量
var speed=10//速度数值越大速度越慢
demo2.innerHTML=demo1.innerHTML
demo.scrollLeft=demo.scrollWidth
function Marquee(){
                                  //向左移
                                  if(b == 0)
                                  {
                                      if(demo2.offsetWidth-demo.scrollLeft<0)
                                      {
                                            demo.scrollLeft-=demo1.offsetWidth
                                      }
                                      else if(demo2.offsetWidth-demo.scrollLeft==0)
                                      {
                                            b = 1
                                            n = n + 1
                                            demo2.innerHTML=demo1.innerHTML
                                            demo.scrollLeft=demo.scrollWidth
                                      }
                                      else if(demo2.offsetWidth-demo.scrollLeft>0)
                                      {
                                            demo.scrollLeft++
                                      }
                                  }
                                  //向又移
                                  if(b == 1)
                                  {
                                      if(demo.scrollLeft<0)
                                      {
                                            demo.scrollLeft+=demo2.offsetWidth
                                      }
                                      else if(demo.scrollLeft=0)
                                      {
                                            b = 0
                                            n = n + 1
                                            demo2.innerHTML=demo1.innerHTML
                                            demo.scrollLeft=demo.scrollWidth
                                      }
                                      else if(demo.scrollLeft>0)
                                      {
                                            demo.scrollLeft--
                                      }
                                  }
                                  //循环次数达到
                                  if(n == cs)
                                  {
                                      
                                  }
                              }
                              var MyMar=setInterval(Marquee,speed)
                              demo.onmouseover=function() {clearInterval(MyMar)}
                              demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script> 

Answer 5

<div id="demo" style="OVERFLOW: hidden; WIDTH: 800px; COLOR: #ffffff; text-align:center;">
<table  border="0" width="680" height="150" cellSpacing="0" cellPadding="0" align="center" cellspace="0">
<tbody>
<tr>
<td id="demo1" width="680" vAlign="top">
<table width="1024" border="0" align="center" cellpadding="0" cellspacing="0">
     <tr>
    <td width="250"><img src="images/book/book1.jpg" width="150" height="200"></td>
    <td width="250"><img src="images/book/book2.jpg" width="150" height="200"></td>
    <td width="250"><img src="images/book/book3.jpg" width="150" height="200"></td>
    <td width="250"><img src="images/book/book4.jpg" width="150" height="200"></td>
    <td width="250"><img src="images/book/lingdao.jpg" width="150" height="200"></td>
    <td width="250"><img src="images/book/shiya.jpg" width="150" height="200"></td>
    <td width="250"><img src="images/book/leshi.jpg" width="150" height="200"></td>
    <td width="250"><img src="images/book/hei.jpg" width="150" height="200"></td>
    <td width="250"><img src="images/book/riben.jpg" width="150" height="200"></td>
    <td width="250"><img src="images/book/xiaoyoushang.jpg" width="150" height="200"></td>
    <td width="250"><img src="images/book/siwei.jpg" width="150" height="200"></td>
    </tr>    
    <tr>
    <td width="250" align="center">1</td>
    <td width="250" align="center">2</td>
    <td width="250" align="center">3</td>
    <td width="250" align="center">4</td>
    <td width="250" align="center">5</td>
    <td width="250" align="center">6</td>
    <td width="250" align="center">7</td>
    <td width="250" align="center">8</td>
    <td width="250" align="center">9</td>
    <td width="250" align="center">10</td>
    <td width="250" align="center">11</td>
    </tr>    
    </table> 
</td>
<td id="demo2" vAlign="top">
</td>
</tr>
</tbody>
</table>
</div>
<script  type="text/javascript">
var cs = 4;//次數                     
var b = 0;//標示變量
var n = 0;//計數變量
var speed=10//值越大速度越慢
demo2.innerHTML=demo1.innerHTML
demo.scrollLeft=demo.scrollWidth
function Marquee(){
                                  //向左移
                                  if(b == 0)
                                  {
                                      if(demo2.offsetWidth-demo.scrollLeft<0)
                                      {
                                            demo.scrollLeft-=demo1.offsetWidth
                                      }
                                      else if(demo2.offsetWidth-demo.scrollLeft==0)
                                      {
                                            b = 1
                                            n = n + 1
                                            demo.scrollLeft-=demo1.offsetWidth
                                      }
                                      else if(demo2.offsetWidth-demo.scrollLeft>0)
                                      {
                                            demo.scrollLeft++
                                      }
                                  }
                                  //向右移
                                  if(b == 1)
                                  {
                                      if(demo.scrollLeft<0)
                                      {
                                            demo.scrollLeft+=demo2.offsetWidth
                                      }
                                      else if(demo.scrollLeft=0)
                                      {
                                            b = 0
                                            n = n + 1
                                            demo.scrollLeft+=demo2.offsetWidth
                                      }
                                      else if(demo.scrollLeft>0)
                                      {
                                            demo.scrollLeft--
                                      }
                                  }
                                  //循環次數達到
                                  if(n == cs)
                                  {
                                     //window.location='Demo4.aspx'; 
                                  }
                              }
                              var MyMar=setInterval(Marquee,speed)
                              demo.onmouseover=function() {clearInterval(MyMar)}
                              demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script> 

Answer 6

<div id="demo" style="OVERFLOW: hidden; WIDTH: 800px; COLOR: #ffffff; text-align:center;">
<table  border="0" width="680" height="150" cellSpacing="0" cellPadding="0" align="center" cellspace="0">
<tbody>
<tr>
<td id="demo1" width="680" vAlign="top">
<table width="1024" border="0" align="center" cellpadding="0" cellspacing="0">
     <tr>
    <td width="250"><img src="images/book/book1.jpg" width="150" height="200"></td>
    <td width="250"><img src="images/book/book2.jpg" width="150" height="200"></td>
    <td width="250"><img src="images/book/book3.jpg" width="150" height="200"></td>
    <td width="250"><img src="images/book/book4.jpg" width="150" height="200"></td>
    <td width="250"><img src="images/book/lingdao.jpg" width="150" height="200"></td>
    <td width="250"><img src="images/book/shiya.jpg" width="150" height="200"></td>
    <td width="250"><img src="images/book/leshi.jpg" width="150" height="200"></td>
    <td width="250"><img src="images/book/hei.jpg" width="150" height="200"></td>
    <td width="250"><img src="images/book/riben.jpg" width="150" height="200"></td>
    <td width="250"><img src="images/book/xiaoyoushang.jpg" width="150" height="200"></td>
    <td width="250"><img src="images/book/siwei.jpg" width="150" height="200"></td>
    </tr>    
    <tr>
    <td width="250" align="center">1</td>
    <td width="250" align="center">2</td>
    <td width="250" align="center">3</td>
    <td width="250" align="center">4</td>
    <td width="250" align="center">5</td>
    <td width="250" align="center">6</td>
    <td width="250" align="center">7</td>
    <td width="250" align="center">8</td>
    <td width="250" align="center">9</td>
    <td width="250" align="center">10</td>
    <td width="250" align="center">11</td>
    </tr>    
    </table> 
</td>
<td id="demo2" vAlign="top">
</td>
</tr>
</tbody>
</table>
</div>
<script  type="text/javascript">
var cs = 4;//次數                     
var b = 0;//標示變量
var n = 0;//計數變量
var speed=10//值越大速度越慢
demo2.innerHTML=demo1.innerHTML
demo.scrollLeft=demo.scrollWidth
function Marquee(){
                                  //向左移
                                  if(b == 0)
                                  {
                                      if(demo2.offsetWidth-demo.scrollLeft<=0)
                                      {
                                            b = 1
                                            n = n + 1
                                            //demo.scrollLeft-=demo1.offsetWidth
                                      }
                                      else if(demo2.offsetWidth-demo.scrollLeft>0)
                                      {
                                            demo.scrollLeft++
                                      }
                                  }
                                  //向右移
                                  if(b == 1)
                                  {
                                      if(demo.scrollLeft<=0)
                                      {
                                            b = 0
                                            n = n + 1
                                            //demo.scrollLeft+=demo2.offsetWidth
                                      }                                      else if(demo.scrollLeft>0)
                                      {
                                            demo.scrollLeft--
                                      }
                                  }
                                  //循環次數達到
                                  if(n == cs)
                                  {
                                     //window.location='Demo4.aspx'; 
                                  }
                              }
                              var MyMar=setInterval(Marquee,speed)
                              demo.onmouseover=function() {clearInterval(MyMar)}
                              demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>