本文主要分享了原生JS實作跑馬燈效果的範例程式碼。具有很好的參考價值,以下跟著小編一起來看下吧
效果如下:(動態效果可複製程式碼查看,案例中的圖片可自行選擇新增)
#程式碼如下:
#<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin:0; padding:0; list-style: none; } p{ position: relative; width: 800px; height: 200px; border: 5px solid lightgreen; margin:10px auto; overflow: hidden; } p ul{ position: absolute; left:0; top:0; } p ul li{ width: 200px; height: 200px; float: left; } p ul li img{ width:100%; height: 100%; } </style> </head> <body> <p id="p1"> <ul> <li><img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=b4251f00ef925cba01ed49ca117e14a7" alt=""/></li> <li><img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=d38403825519770211acbf49459ae7d7" alt=""/></li> <li><img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=53c83d39c62af65db998f4945bacaec2" alt=""/></li> <li><img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=5509f1a642644b40c8aa98c9e2c77a83" alt=""/></li> </ul> </p> <script> var oUl=document.getElementsByTagName('ul')[0]; var lis=oUl.getElementsByTagName('li'); oUl.innerHTML+=oUl.innerHTML; oUl.style.width=lis.length*lis[0].offsetWidth+'px'; var left=null; var timer=setInterval(function(){ left-=3; if(left<-oUl.offsetWidth/2){ left=0; } oUl.style.left=left+'px' },10) </script> </body> </html>
更多原生JS實作跑馬燈效果相關文章請關注PHP中文網!
#