本篇文章主要是對js+div實現圖片滾動效果的示例代碼進行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助
橫向 <div id=demo style="overflow:hidden;width:200px;border:2px solid #e0e0e0;padding:2px;" onmouseover="stopscroll();" onmouseout="doscroll()"> <div id="demo1" style="white-space:nowrap;padding:0;"> <a href="javascript:alert('發表新貼');"><img src="圖片URL" height=20 width=104 border=0></a> <a href="javascript:alert('發表回復');"><img src="圖片URL" height=20 width=104 border=0></a> </div> </div> <!--滾動的javascript--> <script> var t=demo.scrollWidth demo1.innerHTML+=demo1.innerHTML function doMarquee() { demo.scrollLeft=demo.scrollLeft<demo.scrollWidth-demo.offsetWidth?demo.scrollLeft+1:t-demo.offsetWidth } function doscroll() { sc=setInterval(doMarquee,20) } function stopscroll() { clearInterval(sc) } doscroll() </script> <!--滾動的javascript結束--> 縱向 <div id="demo" style="height:110px; overflow:hidden "> <div id="demo1"> <a href="javascript:alert('發表新貼');"><img src="圖片URL" height=20 width=104 border=0></a> <a href="javascript:alert('發表回復');"><img src="圖片URL" height=20 width=104 border=0></a> </div><div id="demo2"></div> <!--滾動的javascript--> <script> var speed=100 demo2.innerHTML=demo1.innerHTML function Marquees(){ if(demo2.offsetTop-demo.scrollTop<=0) demo.scrollTop-=demo1.offsetHeight else{ demo.scrollTop++ } } var MyMars=setInterval(Marquees,speed) demo.onmouseover=function() { clearInterval(MyMars) } demo.onmouseout=function() { MyMars=setInterval(Marquees,speed) } zlselect('6'); </script><!--滾動的javascript結束--> </div>