常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
废话不多说了,直接给大家贴代码了,具体代码如下所示:
<head> <-----> </head> <body> <!--向下滚动代码开始--> <divid="colee"style="overflow:hidden;height:253px;width:410px;"> <divid="colee1"> <p><imgsrc=""></p> <p><imgsrc=""></p> <p><imgsrc=""></p> <p><imgsrc=""></p> <p><imgsrc=""></p> <p><imgsrc=""></p> <p><imgsrc=""></p> <p><imgsrc=""></p> <p><imgsrc=""></p> </div> <divid="colee2"></div> </div> <script> varspeed=30; varcolee2=document.getElementById("colee2"); varcolee1=document.getElementById("colee1"); varcolee=document.getElementById("colee"); colee2.innerHTML=colee1.innerHTML;//克隆colee1为colee2 functionMarquee1(){ //当滚动至colee1与colee2交界时 if(colee2.offsetTop-colee.scrollTop<=0){ colee.scrollTop-=colee1.offsetHeight;//colee跳到最顶端 }else{ colee.scrollTop++ } } varMyMar1=setInterval(Marquee1,speed)//设置定时器 //鼠标移上时清除定时器达到滚动停止的目的 colee.onmouseover=function(){clearInterval(MyMar1)} //鼠标移开时重设定时器 colee.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)} </script> <!--向上滚动代码结束--> <br> <!--下面是向下滚动代码--> <divid="colee_bottom"style="overflow:hidden;height:253px;width:410px;"> <divid="colee_bottom1"> <p><imgsrc="/jscss/demoimg/200907/bg3.jpg"></p> <p><imgsrc="/jscss/demoimg/200907/bg3.jpg"></p> <p><imgsrc="/jscss/demoimg/200907/bg3.jpg"></p> <p><imgsrc="/jscss/demoimg/200907/bg3.jpg"></p> <p><imgsrc="/jscss/demoimg/200907/bg3.jpg"></p> <p><imgsrc="/jscss/demoimg/200907/bg3.jpg"></p> <p><imgsrc="/jscss/demoimg/200907/bg3.jpg"></p> <p><imgsrc="/jscss/demoimg/200907/bg3.jpg"></p> <p><imgsrc="/jscss/demoimg/200907/bg3.jpg"></p> </div> <divid="colee_bottom2"></div> </div> <script> varspeed=30 varcolee_bottom2=document.getElementById("colee_bottom2"); varcolee_bottom1=document.getElementById("colee_bottom1"); varcolee_bottom=document.getElementById("colee_bottom"); colee_bottom2.innerHTML=colee_bottom1.innerHTML colee_bottom.scrollTop=colee_bottom.scrollHeight functionMarquee2(){ if(colee_bottom1.offsetTop-colee_bottom.scrollTop>=0) colee_bottom.scrollTop+=colee_bottom2.offsetHeight else{ colee_bottom.scrollTop-- } } varMyMar2=setInterval(Marquee2,speed) colee_bottom.onmouseover=function(){clearInterval(MyMar2)} colee_bottom.onmouseout=function(){MyMar2=setInterval(Marquee2,speed)} </script> <!--向下滚动代码结束--> <br> <!--下面是向左滚动代码--> <divid="colee_left"style="overflow:hidden;width:500px;"> <tablecellpadding="0"cellspacing="0"border="0"> <tr><tdid="colee_left1"valign="top"align="center"> <tablecellpadding="2"cellspacing="0"border="0"> <tralign="center"> <td><p><imgsrc="/jscss/demoimg/200907/bg3.jpg"></p></td> <td><p><imgsrc="/jscss/demoimg/200907/bg3.jpg"></p></td> <td><p><imgsrc="/jscss/demoimg/200907/bg3.jpg"></p></td> <td><p><imgsrc="/jscss/demoimg/200907/bg3.jpg"></p></td> <td><p><imgsrc="/jscss/demoimg/200907/bg3.jpg"></p></td> <td><p><imgsrc="/jscss/demoimg/200907/bg3.jpg"></p></td> <td><p><imgsrc="/jscss/demoimg/200907/bg3.jpg"></p></td> </tr> </table> </td> <tdid="colee_left2"valign="top"></td> </tr> </table> </div> <script> //使用div时,请保证colee_left2与colee_left1是在同一行上. varspeed=30//速度数值越大速度越慢 varcolee_left2=document.getElementById("colee_left2"); varcolee_left1=document.getElementById("colee_left1"); varcolee_left=document.getElementById("colee_left"); colee_left2.innerHTML=colee_left1.innerHTML functionMarquee3(){ if(colee_left2.offsetWidth-colee_left.scrollLeft<=0)//offsetWidth是对象的可见宽度 colee_left.scrollLeft-=colee_left1.offsetWidth//scrollWidth是对象的实际内容的宽,不包边线宽度 else{ colee_left.scrollLeft++ } } varMyMar3=setInterval(Marquee3,speed) colee_left.onmouseover=function(){clearInterval(MyMar3)} colee_left.onmouseout=function(){MyMar3=setInterval(Marquee3,speed)} </script> <!--向左滚动代码结束--> <br> <!--下面是向右滚动代码--> <divid="colee_right"style="overflow:hidden;width:500px;"> <tablecellpadding="0"cellspacing="0"border="0"> <tr><tdid="colee_right1"valign="top"align="center"> <tablecellpadding="2"cellspacing="0"border="0"> <tralign="center"> <td><p><imgsrc="/jscss/demoimg/200907/bg3.jpg"></p></td> <td><p><imgsrc="/jscss/demoimg/200907/bg3.jpg"></p></td> <td><p><imgsrc="/jscss/demoimg/200907/bg3.jpg"></p></td> <td><p><imgsrc="/jscss/demoimg/200907/bg3.jpg"></p></td> <td><p><imgsrc="/jscss/demoimg/200907/bg3.jpg"></p></td> </tr> </table> </td> <tdid="colee_right2"valign="top"></td> </tr> </table> </div> <script> varspeed=30//速度数值越大速度越慢 varcolee_right2=document.getElementById("colee_right2"); varcolee_right1=document.getElementById("colee_right1"); varcolee_right=document.getElementById("colee_right"); colee_right2.innerHTML=colee_right1.innerHTML functionMarquee4(){ if(colee_right.scrollLeft<=0) colee_right.scrollLeft+=colee_right2.offsetWidth else{ colee_right.scrollLeft-- } } varMyMar4=setInterval(Marquee4,speed) colee_right.onmouseover=function(){clearInterval(MyMar4)} colee_right.onmouseout=function(){MyMar4=setInterval(Marquee4,speed)} </script> <!--向右滚动代码结束--> </body> </html>
以上所述是小编给大家介绍的常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!