JS滚动类跑不起来
程序代码:
<div id=demo class="l_l" style="OVERFLOW: hidden; WIDTH: 618px; text-align:center; margin:10px 3px 0px 3px"> <table cellspacing="0" cellpadding="0" align="center" border="0"> <tbody> <tr> <td id="marque_Pic0" valign="top"> <table class="imgdistance1" width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="110" align="center"> <a href="{$admo[i].url}" target="_blank"><IMG src="{$admo[i].img}" width=140 height=140 border="0" style="cursor:pointer;"> </a> </td> <td height="110" align="center"> <a href="{$admo[i].url}" target="_blank"><IMG src="{$admo[i].img}" width=140 height=140 border="0" style="cursor:pointer;"> </a> </td> <td height="110" align="center"> <a href="{$admo[i].url}" target="_blank"><IMG src="{$admo[i].img}" width=140 height=140 border="0" style="cursor:pointer;"> </a> </td> <td height="110" align="center"> <a href="{$admo[i].url}" target="_blank"><IMG src="{$admo[i].img}" width=140 height=140 border="0" style="cursor:pointer;"> </a> </td> <td height="110" align="center"> <a href="{$admo[i].url}" target="_blank"><IMG src="{$admo[i].img}" width=140 height=140 border="0" style="cursor:pointer;"> </a> </td> <td height="110" align="center"> <a href="{$admo[i].url}" target="_blank"><IMG src="{$admo[i].img}" width=140 height=140 border="0" style="cursor:pointer;"> </a> </td> <td height="110" align="center"> <a href="{$admo[i].url}" target="_blank"><IMG src="{$admo[i].img}" width=140 height=140 border="0" style="cursor:pointer;"> </a> </td> <td height="110" align="center"> <a href="{$admo[i].url}" target="_blank"><IMG src="{$admo[i].img}" width=140 height=140 border="0" style="cursor:pointer;"> </a> </td> </tr> </table> </td> <td id="marque_Pic1" valign="top"></td> </tr> </tbody> </table> </div> <div id=dem1 class="l_l" style="OVERFLOW: hidden; WIDTH: 300px; margin:10px 5px 0px 5px;"> <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0"> <td> <tr> <td id="marque_Pic3" valign="top"> <table class="imgdistance" width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="185" align="center" valign="top"> <a href="{$adpro[0].url}" target="_blank"><IMG name="{$adpro[0].name}" price="{$adpro[0].price}" info="{$adpro[0].info}" style="cursor:pointer;" height=140 width=140 src="{$adpro[0].img}" border=0 onmouseover="ad_zy(this)"> {$adpro[0].name} <br/> <span class="color-ff0000">¥{$adpro[0].price}</span></a> </td> <td height="185" align="center" valign="top"> <a href="{$adpro[2].url}" target="_blank"><IMG name="{$adpro[2].name}" price="{$adpro[2].price}" info="{$adpro[2].info}" style="cursor:pointer;" height=140 width=140 src="{$adpro[2].img}" border=0 onmouseover="ad_zy(this)"> {$adpro[2].name} <br/> <span class="color-ff0000">¥{$adpro[2].price}</span></a> </td> <td height="185" align="center" valign="top"> <a href="{$adpro[4].url}" target="_blank"><IMG name="{$adpro[4].name}" price="{$adpro[4].price}" info="{$adpro[4].info}" style="cursor:pointer;" height=140 width=140 src="{$adpro[4].img}" border=0 onmouseover="ad_zy(this)"> {$adpro[4].name} <br/> <span class="color-ff0000">¥{$adpro[4].price}</span></a> </td> <td height="185" align="center" valign="top"> <a href="{$adpro[6].url}" target="_blank"><IMG name="{$adpro[6].name}" price="{$adpro[6].price}" info="{$adpro[6].info}" style="cursor:pointer;" height=140 width=140 src="{$adpro[6].img}" border=0 onmouseover="ad_zy(this)"> {$adpro[6].name} <br/> <span class="color-ff0000">¥{$adpro[6].price}</span></a> </td> <td height="185" align="center" valign="top"> <a href="{$adpro[8].url}" target="_blank"><IMG name="{$adpro[8].name}" price="{$adpro[8].price}" info="{$adpro[8].info}" style="cursor:pointer;" height=140 width=140 src="{$adpro[8].img}" border=0 onmouseover="ad_zy(this)"> {$adpro[8].name} <br/> <span class="color-ff0000">¥{$adpro[8].price}</span></a> </td> <td height="185" align="center" valign="top"> <a href="{$adpro[10].url}" target="_blank"><IMG name="{$adpro[10].name}" price="{$adpro[10].price}" info="{$adpro[10].info}" style="cursor:pointer;" height=140 width=140 src="{$adpro[10].img}" border=0 onmouseover="ad_zy(this)"> {$adpro[10].name} <br/> <span class="color-ff0000">¥{$adpro[10].price}</span></a> </td> <td height="185" align="center" valign="top"> <a href="{$adpro[12].url}" target="_blank"><IMG name="{$adpro[12].name}" price="{$adpro[12].price}" info="{$adpro[12].info}" style="cursor:pointer;" height=140 width=140 src="{$adpro[12].img}" border=0 onmouseover="ad_zy(this)"> {$adpro[12].name} <br/> <span class="color-ff0000">¥{$adpro[12].price}</span></a> </td> <td height="185" align="center" valign="top"> <a href="{$adpro[14].url}" target="_blank"><IMG name="{$adpro[14].name}" price="{$adpro[14].price}" info="{$adpro[14].info}" style="cursor:pointer;" height=140 width=140 src="{$adpro[14].img}" border=0 onmouseover="ad_zy(this)"> {$adpro[14].name} <br/> <span class="color-ff0000">¥{$adpro[14].price}</span></a> </td> <td height="185" align="center" valign="top"> <a href="{$adpro[16].url}" target="_blank"><IMG name="{$adpro[16].name}" price="{$adpro[16].price}" info="{$adpro[16].info}" style="cursor:pointer;" height=140 width=140 src="{$adpro[16].img}" border=0 onmouseover="ad_zy(this)"> {$adpro[16].name} <br/> <span class="color-ff0000">¥{$adpro[16].price}</span></a> </td> </tr> <tr> <td height="185" align="center" valign="bottom"> <a href="{$adpro[1].url}" target="_blank"><IMG name="{$adpro[1].name}" price="{$adpro[1].price}" info="{$adpro[1].info}" style="cursor:pointer;" height=140 width=140 src="{$adpro[1].img}" border=0 onmouseover="ad_zy(this)"> {$adpro[1].name} <br/> <span class="color-ff0000">¥{$adpro[1].price}</span></a> </td> <td height="185" align="center" valign="bottom"> <a href="{$adpro[3].url}" target="_blank"><IMG name="{$adpro[3].name}" price="{$adpro[3].price}" info="{$adpro[3].info}" style="cursor:pointer;" height=140 width=140 src="{$adpro[3].img}" border=0 onmouseover="ad_zy(this)"> {$adpro[3].name} <br/> <span class="color-ff0000">¥{$adpro[3].price}</span></a> </td> <td height="185" align="center" valign="bottom"> <a href="{$adpro[5].url}" target="_blank"><IMG name="{$adpro[5].name}" price="{$adpro[5].price}" info="{$adpro[5].info}" style="cursor:pointer;" height=140 width=140 src="{$adpro[5].img}" border=0 onmouseover="ad_zy(this)"> {$adpro[5].name} <br/> <span class="color-ff0000">¥{$adpro[5].price}</span></a> </td> <td height="185" align="center" valign="bottom"> <a href="{$adpro[7].url}" target="_blank"><IMG name="{$adpro[7].name}" price="{$adpro[7].price}" info="{$adpro[7].info}" style="cursor:pointer;" height=140 width=140 src="{$adpro[7].img}" border=0 onmouseover="ad_zy(this)"> {$adpro[7].name} <br/> <span class="color-ff0000">¥{$adpro[7].price}</span></a> </td> <td height="185" align="center" valign="bottom"> <a href="{$adpro[9].url}" target="_blank"><IMG name="{$adpro[9].name}" price="{$adpro[9].price}" info="{$adpro[9].info}" style="cursor:pointer;" height=140 width=140 src="{$adpro[9].img}" border=0 onmouseover="ad_zy(this)"> {$adpro[9].name} <br/> <span class="color-ff0000">¥{$adpro[9].price}</span></a> </td> <td height="185" align="center" valign="bottom"> <a href="{$adpro[11].url}" target="_blank"><IMG name="{$adpro[11].name}" price="{$adpro[11].price}" info="{$adpro[11].info}" style="cursor:pointer;" height=140 width=140 src="{$adpro[11].img}" border=0 onmouseover="ad_zy(this)"> {$adpro[11].name} <br/> <span class="color-ff0000">¥{$adpro[11].price}</span></a> </td> <td height="185" align="center" valign="bottom"> <a href="{$adpro[13].url}" target="_blank"><IMG name="{$adpro[13].name}" price="{$adpro[13].price}" info="{$adpro[13].info}" style="cursor:pointer;" height=140 width=140 src="{$adpro[13].img}" border=0 onmouseover="ad_zy(this)"> {$adpro[13].name} <br/> <span class="color-ff0000">¥{$adpro[13].price}</span></a> </td> <td height="185" align="center" valign="bottom"> <a href="{$adpro[15].url}" target="_blank"><IMG name="{$adpro[15].name}" price="{$adpro[15].price}" info="{$adpro[15].info}" style="cursor:pointer;" height=140 width=140 src="{$adpro[15].img}" border=0 onmouseover="ad_zy(this)"> {$adpro[15].name} <br/> <span class="color-ff0000">¥{$adpro[15].price}</span></a> </td> <td height="185" align="center" valign="bottom"> <a href="{$adpro[17].url}" target="_blank"><IMG name="{$adpro[17].name}" price="{$adpro[17].price}" info="{$adpro[17].info}" style="cursor:pointer;" height=140 width=140 src="{$adpro[17].img}" border=0 onmouseover="ad_zy(this)"> {$adpro[17].name} <br/> <span class="color-ff0000">¥{$adpro[17].price}</span></a> </td> </tr> </table> </td> <td id="marque_Pic4" valign="top"></td> </tr> </td> </table> </div> <script> function ad_zy(obj) { } /* 参数说明 id 最外层ID id1 为内容层ID id2 为克隆层ID */ function scrolls(id,id1,id2) { var this_=this; this_.demo=document.getElementById(id); this_.obj1=document.getElementById(id1); this_.obj2=document.getElementById(id2); this_.obj2.innerHTML=this_.obj1.innerHTML; this_.speed=1; //滚动速度 this_.step_width=59; //滚动步长 //49 this_.extent=5;//滚动幅度 this_.redeem=9; //redeem=5 表示5屏之后补偿一次extent1 this_.redeem_sum=1; //补偿计数器 this_.sum=0; //滚动数量 this_.space=3; //每屏暂停时间 单位秒 this_.MyMar=''; //滚动控制对象 this_.LR='right'; //往左往右滚动 scrolls.prototype.MarqueeL=function() { this_.LR='left'; if(this_.demo.scrollLeft>=this_.obj1.scrollWidth) { this_.demo.scrollLeft=0 }else{ if(this_.redeem_sum-this_.redeem==0) { this_.redeem_sum=0; this_.demo.scrollLeft=this_.demo.scrollLeft+(Number(this_.extent)*2); }else{ this_.demo.scrollLeft=this_.demo.scrollLeft+Number(this_.extent); } } if(this_.sum<=this_.step_width) { this_.sum++; clearInterval(this_.MyMar); setTimeout(this_.MarqueeL,this_.speed); }else{ this_.sum=0; clearInterval(this_.MyMar); this_.redeem_sum++; this_.MyMar=setTimeout(this_.nextsuperL,this_.space*1000); } } scrolls.prototype.nextsuperL=function() { this_.MyMar=setInterval(this_.MarqueeL,this_.speed); } scrolls.prototype.MarqueeR=function() { this_.LR='right'; if(this_.demo.scrollLeft<=0) { this_.demo.scrollLeft=this_.obj1.scrollWidth; }else{ if(this_.redeem_sum-this_.redeem==0) { this_.redeem_sum=0; this_.demo.scrollLeft=this_.demo.scrollLeft-(Number(this_.extent)*2); }else{ this_.demo.scrollLeft=this_.demo.scrollLeft-Number(this_.extent); } } if(this_.sum<=this_.step_width) { this_.sum++; clearInterval(this_.MyMar); setTimeout(this_.MarqueeR,this_.speed); }else{ this_.sum=0; this_.redeem_sum++; clearInterval(this_.MyMar); this_.MyMar=setTimeout(this_.nextsuperR,this_.space*1000); } } scrolls.prototype.nextsuperR=function() { this_.MyMar=setInterval(this_.MarqueeR,this_.speed); } scrolls.prototype.moveleft=function() { clearInterval(this_.MyMar); this_.sum=0; this_.MarqueeL(); } scrolls.prototype.moveright=function() { clearInterval(this_.MyMar); this_.sum=0; this_.MarqueeR() } /////////////////////////////////////////////////////////////////// this_.demo.onmouseover=function() {clearInterval(this_.MyMar)} this_.demo.onmouseout=function() {if(this_.LR=='right'){this_.MyMar=setInterval(this_.MarqueeR,this_.space*1000)}else{this_.MyMar=setInterval(this_.MarqueeL,this_.space*1000)}} } var ttsty=new scrolls('demo','marque_Pic0','marque_Pic1'); ttsty.step_width=123; ttsty.redeem=3; ttsty.MarqueeR(); var ss=new scrolls('dem1','marque_Pic3','marque_Pic4'); ss.MarqueeR(); </script>
这是一个滚动类
var ttsty=new scrolls('demo','marque_Pic0','marque_Pic1');
ttsty.step_width=123;
ttsty.redeem=3;
ttsty.MarqueeR();
var ss=new scrolls('dem1','marque_Pic3','marque_Pic4');
ss.MarqueeR();
我实例化了两个 但只有第二个滚动的,第一个不滚动,且滚动不正常
但我只实例化一个滚动正常