图片滚动（无缝、平滑、上下左右滚动）
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>向上下左右不间断无缝滚动图片的效果(兼容火狐和IE)- www.codefans.net</title> 6 </head> 7 <body> 8 <div id="colee" style="overflow:hidden;height:253px;width:410px;"> 9 <div id="colee1"> 10 <p><img src="/jscss/demoimg/200907/bg3.jpg"></p> 11 <p><img src="/jscss/demoimg/200907/bg3.jpg"></p> 12 <p><img src="/jscss/demoimg/200907/bg3.jpg"></p> 13 <p><img src="/jscss/demoimg/200907/bg3.jpg"></p> 14 <p><img src="/jscss/demoimg/200907/bg3.jpg"></p> 15 <p><img src="/jscss/demoimg/200907/bg3.jpg"></p> 16 <p><img src="/jscss/demoimg/200907/bg3.jpg"></p> 17 <p><img src="/jscss/demoimg/200907/bg3.jpg"></p> 18 <p><img src="/jscss/demoimg/200907/bg3.jpg"></p> 19 </div> 20 <div id="colee2"></div> 21 </div> 22 <script> 23 var speed=30; 24 var colee2=document.getElementById("colee2"); 25 var colee1=document.getElementById("colee1"); 26 var colee=document.getElementById("colee"); 27 colee2.innerHTML=colee1.innerHTML; //克隆colee1为colee2 28 function Marquee1(){ 29 //当滚动至colee1与colee2交界时 30 if(colee2.offsetTop-colee.scrollTop<=0){ 31 colee.scrollTop-=colee1.offsetHeight; //colee跳到最顶端 32 }else{ 33 colee.scrollTop++ 34 } 35 } 36 var MyMar1=setInterval(Marquee1,speed)//设置定时器 37 //鼠标移上时清除定时器达到滚动停止的目的 38 colee.onmouseover=function() {clearInterval(MyMar1)} 39 //鼠标移开时重设定时器 40 colee.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)} 41 </script> 42 <!--向上滚动代码结束--> 43 <br> 44 <!--下面是向下滚动代码--> 45 <div id="colee_bottom" style="overflow:hidden;height:253px;width:410px;"> 46 <div id="colee_bottom1"> 47 <p><img src="/jscss/demoimg/200907/bg3.jpg"></p> 48 <p><img src="/jscss/demoimg/200907/bg3.jpg"></p> 49 <p><img src="/jscss/demoimg/200907/bg3.jpg"></p> 50 <p><img src="/jscss/demoimg/200907/bg3.jpg"></p> 51 <p><img src="/jscss/demoimg/200907/bg3.jpg"></p> 52 <p><img src="/jscss/demoimg/200907/bg3.jpg"></p> 53 <p><img src="/jscss/demoimg/200907/bg3.jpg"></p> 54 <p><img src="/jscss/demoimg/200907/bg3.jpg"></p> 55 <p><img src="/jscss/demoimg/200907/bg3.jpg"></p> 56 </div> 57 <div id="colee_bottom2"></div> 58 </div> 59 <script> 60 var speed=30 61 var colee_bottom2=document.getElementById("colee_bottom2"); 62 var colee_bottom1=document.getElementById("colee_bottom1"); 63 var colee_bottom=document.getElementById("colee_bottom"); 64 colee_bottom2.innerHTML=colee_bottom1.innerHTML 65 colee_bottom.scrollTop=colee_bottom.scrollHeight 66 function Marquee2(){ 67 if(colee_bottom1.offsetTop-colee_bottom.scrollTop>=0) 68 colee_bottom.scrollTop+=colee_bottom2.offsetHeight 69 else{ 70 colee_bottom.scrollTop-- 71 } 72 } 73 var MyMar2=setInterval(Marquee2,speed) 74 colee_bottom.onmouseover=function() {clearInterval(MyMar2)} 75 colee_bottom.onmouseout=function() {MyMar2=setInterval(Marquee2,speed)} 76 </script> 77 <!--向下滚动代码结束--> 78 <br> 79 <!--下面是向左滚动代码--> 80 <div id="colee_left" style="overflow:hidden;width:500px;"> 81 <table cellpadding="0" cellspacing="0" border="0"> 82 <tr><td id="colee_left1" valign="top" align="center"> 83 <table cellpadding="2" cellspacing="0" border="0"> 84 <tr align="center"> 85 <td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td> 86 <td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td> 87 <td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td> 88 <td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td> 89 <td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td> 90 <td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td> 91 <td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td> 92 </tr> 93 </table> 94 </td> 95 <td id="colee_left2" valign="top"></td> 96 </tr> 97 </table> 98 </div> 99 <script> 100 //使用div时，请保证colee_left2与colee_left1是在同一行上. 101 var speed=30//速度数值越大速度越慢 102 var colee_left2=document.getElementById("colee_left2"); 103 var colee_left1=document.getElementById("colee_left1"); 104 var colee_left=document.getElementById("colee_left"); 105 colee_left2.innerHTML=colee_left1.innerHTML 106 function Marquee3(){ 107 if(colee_left2.offsetWidth-colee_left.scrollLeft<=0)//offsetWidth 是对象的可见宽度 108 colee_left.scrollLeft-=colee_left1.offsetWidth//scrollWidth 是对象的实际内容的宽，不包边线宽度 109 else{ 110 colee_left.scrollLeft++ 111 } 112 } 113 var MyMar3=setInterval(Marquee3,speed) 114 colee_left.onmouseover=function() {clearInterval(MyMar3)} 115 colee_left.onmouseout=function() {MyMar3=setInterval(Marquee3,speed)} 116 </script> 117 <!--向左滚动代码结束--> 118 <br> 119 <!--下面是向右滚动代码--> 120 <div id="colee_right" style="overflow:hidden;width:500px;"> 121 <table cellpadding="0" cellspacing="0" border="0"> 122 <tr><td id="colee_right1" valign="top" align="center"> 123 <table cellpadding="2" cellspacing="0" border="0"> 124 <tr align="center"> 125 <td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td> 126 <td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td> 127 <td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td> 128 <td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td> 129 <td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td> 130 </tr> 131 </table> 132 </td> 133 <td id="colee_right2" valign="top"></td> 134 </tr> 135 </table> 136 </div> 137 <script> 138 var speed=30//速度数值越大速度越慢 139 var colee_right2=document.getElementById("colee_right2"); 140 var colee_right1=document.getElementById("colee_right1"); 141 var colee_right=document.getElementById("colee_right"); 142 colee_right2.innerHTML=colee_right1.innerHTML 143 function Marquee4(){ 144 if(colee_right.scrollLeft<=0) 145 colee_right.scrollLeft+=colee_right2.offsetWidth 146 else{ 147 colee_right.scrollLeft-- 148 } 149 } 150 var MyMar4=setInterval(Marquee4,speed) 151 colee_right.onmouseover=function() {clearInterval(MyMar4)} 152 colee_right.onmouseout=function() {MyMar4=setInterval(Marquee4,speed)} 153 </script> 154 <!--向右滚动代码结束--> 155 </body> 156 </html>
原文地址： http://www.codefans.net/jscss/code/1801.shtml
