JavaScript实现简单图片滚动附源码下载
<spanstyle="font-size:14px;"><!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <title>ScrollImage</title> <metahttp-equiv="content-type"content="text/html;charset=utf-8"> <styletype="text/css"> body { font-size:12px; font-family:"MicrosoftYahei",'微软雅黑','SimSun','宋体'; margin:0px; padding:0px; text-align:center; } img { width:150px; height:150px; } .news_root { width:225px; height:134px; text-align:left; margin:0auto; } div.news_header { width:243px; height:16px; vertical-align:top; text-align:left; font-size:14px; padding:6px; } #scrollContainer { width:345px; margin:2px5px; overflow:hidden; text-align:left; } </style> </head> <body> <div> <div>C罗不哭,加油</div> <divid="scrollContainer"> <divid="scrollContent"> <tableborder="0"> <tralign="middle"> <tdid="firstCol"> <tableborder="0"> <tr> <td><imgsrc="c1.jpg"alt="C罗加油"></td> <td><imgsrc="c2.jpg"alt="C罗加油"></td> <td><imgsrc="c3.jpg"alt="C罗加油"></td> <td><imgsrc="c4.jpg"alt="C罗加油"></td> <td><imgsrc="c5.jpg"alt="C罗加油"></td> <td><imgsrc="c6.jpg"alt="C罗加油"></td> <td><imgsrc="c7.jpg"alt="C罗加油"></td> <td><imgsrc="c8.jpg"alt="C罗加油"></td> <td><imgsrc="c9.jpg"alt="C罗加油"></td> </tr> </table> </td> <tdid="lastCol"></td> </tr> </table> </div> </div> </div> <scripttype="text/javascript"> varstopscroll=false; varscrollContHeight=155; varscrollContWidth=300; varscrollSpeed=25; varscrollContainer=document.getElementById('scrollContainer'); varscrollContent=document.getElementById('scrollContent'); varfirstCol=document.getElementById('firstCol'); varlastCol=document.getElementById('lastCol'); //将第一列的内容复制到第二列,让滚动看起来连续 lastCol.innerHTML=firstCol.innerHTML; scrollContainer.style.width=scrollContWidth+"px"; scrollContainer.style.height=scrollContHeight+"px"; scrollContainer.noWrap=true; scrollContainer.onmouseover=newFunction("stopscroll=true;"); scrollContainer.onmouseout=newFunction("stopscroll=false;"); functioninit() { scrollContainer.scrollLeft=0; setInterval(scrollLeft1,scrollSpeed); } init(); varcurrleft=0; functionscrollLeft1() { if(stopscroll==true)return; currleft=scrollContainer.scrollLeft; scrollContainer.scrollLeft+=1; if(currleft==scrollContainer.scrollLeft) { scrollContainer.scrollLeft=0; scrollContainer.scrollLeft+=1; } } </script> </body> </html></span>
源码下载