兼容FF,JS不间断循环滚动,包含自滚动,左右自滚动,点击左右滚动,鼠标暂停效果

  1. <BODY leftMargin=0 topMargin=2 marginheight="0" marginwidth="0">
  2. <CENTER>
  3. <p>
  4. <h1>JS不间断循环滚动h1><p>
  5.   <TABLE 
  6. style="BORDER-RIGHT: #666666 1px solid; BORDER-TOP: #666666 1px solid; BORDER-LEFT: #666666 1px solid; BORDER-BOTTOM: #666666 1px solid" 
  7. cellSpacing=0 cellPadding=0 width=750 align=center border=0>
  8.   <TBODY>
  9.   <TR><td width="30"><a href="#" onClick="clickdiv()" id="aa">向左a>td>
  10.     <TD>
  11.       <DIV id=demo style="OVERFLOW: hidden; WIDTH: 750px; COLOR: #ffffff">
  12.       <TABLE cellSpacing=0 cellPadding=0 align=left border=0 cellspace="0">
  13.         <TBODY>
  14.         <TR>
  15.           <TD id=demo1 vAlign=top><table width="1710" height="116"  border="0" cellpadding="0" cellspacing="0">
  16.             <tr>
  17.               <td width="171" background="pic_bg.jpg"><div align="center">内容一div>td>
  18.               <td width="171" background="pic_bg.jpg"><div align="center">内容二div>td>
  19.               <td width="171" background="pic_bg.jpg"><div align="center">内容三div>td>
  20.               <td width="171" background="pic_bg.jpg"><div align="center">内容四div>td>
  21.               <td width="171" background="pic_bg.jpg"><div align="center">内容五div>td>
  22.               <td width="171" background="pic_bg.jpg"><div align="center">内容六div>td>
  23.               <td width="171" background="pic_bg.jpg"><div align="center">内容七div>td>
  24.               <td width="171" background="pic_bg.jpg"><div align="center">内容八div>td>
  25.               <td width="171" background="pic_bg.jpg"><div align="center">内容九div>td>
  26.               <td width="171" background="pic_bg.jpg"><div align="center">内容十div>td>
  27.             tr>
  28.           table>TD>
  29.           <TD id=demo2 vAlign=top> TD>TR>TBODY>TABLE>DIV>
  30.      
  31.     TD><td width="30"><a href="#" onClick="Rclickdiv()" id="mcc">向右a>td>TR>TBODY>TABLE>TD>TR>TABLE>
  32. CENTER><SCRIPT>
  33. var speed3=25//速度数值越大速度越慢
  34. var t=false;
  35. var id="aa";
  36. document.getElementById("demo2").innerHTML=document.getElementById("demo1").innerHTML
  37. function Marquee(){
  38. if(document.getElementById("demo2").offsetWidth-document.getElementById("demo").scrollLeft<=0)
  39. document.getElementById("demo").scrollLeft-=document.getElementById("demo1").offsetWidth
  40. else{
  41. document.getElementById("demo").scrollLeft++
  42. }
  43. t=false;
  44. }
  45. function RMarquee(){ 
  46. if(document.getElementById("demo").scrollLeft<=0)
  47.   document.getElementById("demo").scrollLeft+=document.getElementById("demo2").offsetWidth
  48.   else{
  49.   document.getElementById("demo").scrollLeft--
  50.   }
  51.   t=true;
  52. }
  53. function clickdiv(){
  54. clearInterval(MyMar)
  55. Marquee();
  56. }
  57. function Rclickdiv(){
  58. clearInterval(MyMar)
  59. RMarquee();
  60. }
  61. var MyMar=setInterval(Marquee,speed3)
  62. document.getElementById("demo").onmouseover=function() {clearInterval(MyMar)}
  63. document.getElementById("demo").onmouseout=function() {if(t){MyMar=setInterval(RMarquee,speed3)}else{MyMar=setInterval(Marquee,speed3)}}
  64. document.getElementById('mcc').onmouseout=function(){clearInterval(MyMar);MyMar=setInterval(RMarquee,speed3);}
  65. document.getElementById('aa').onmouseout=function(){clearInterval(MyMar);MyMar=setInterval(Marquee,speed3);}
  66. SCRIPT>
  67. BODY>

你可能感兴趣的:(js)