<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>图片滚动</title> </head> <body> <style type="text/css"> <!-- #picScroll {background: #FFF;overflow:hidden;border: 1px dashed #CCC;width: 745px;} #picScroll img {border: 3px solid #F2F2F2;} #picSdiv {float: left;width: 800%;} #picSdiv1 {float: left;} #picSdiv2 {float: left;} --> </style> <div> <div> <div> <a href="#" ><img src="https://www.jb51.net/article/img/a1.jpg" /></a> <a href="#" ><img src="https://www.jb51.net/article/img/a2.jpg" /></a> <a href="#" ><img src="https://www.jb51.net/article/img/a3.jpg" /></a> <a href="#" ><img src="https://www.jb51.net/article/img/a4.jpg" /></a> <a href="#" ><img src="https://www.jb51.net/article/img/a5.jpg" /></a> <a href="#" ><img src="https://www.jb51.net/article/img/a6.jpg" /></a> <a href="#" ><img src="https://www.jb51.net/article/img/a7.jpg" /></a> <a href="#" ><img src="https://www.jb51.net/article/img/a8.jpg" /></a> <a href="#" ><img src="https://www.jb51.net/article/img/a9.jpg" /></a> <a href="#" ><img src="https://www.jb51.net/article/img/a10.jpg" /></a> <a href="#" ><img src="https://www.jb51.net/article/img/a11.jpg" /></a> <a href="#" ><img src="https://www.jb51.net/article/img/a12.jpg" /></a> </div> <div></div> </div> </div> <script> <!-- var speed=10; var picS=document.getElementById("picScroll"); var picS1=document.getElementById("picSdiv1"); function Marquee(){ if(picS.scrollLeft >= picS1.offsetWidth) picS.scrollLeft =0; else{ picS.scrollLeft++; } } var MyMar=setInterval(Marquee,speed); picS.onmouseover=function() {clearInterval(MyMar)}; picS.onmouseout=function() {MyMar=setInterval(Marquee,speed)}; --> </script> </body> </html>
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》