這篇文章帶給大家的內容是關於js如何利用setInterval定時器方法實現輪播圖(完整程式碼),有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。
以前去面試的面試的時候,面試官直接叫我手寫一個輪播圖,那是剛出來,所以js也不厲害,所以直接說不會寫,如果想要高薪js還是要會,平常無聊就學一下也行的,現在利用setInterval定時器方法開發一個原生的輪播圖;
程式碼如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{margin:0;padding: 0;} #main{width:490px;margin:100px auto;} #main img{width:100%;height:300px} #main li{list-style: none;float: left;width:47px;border:1px solid orange;text-align: center; padding:6px; } .orange{background-color: orange} </style> </head> <body> <p id="main"> <img src="img/1.jpg"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> </p> <script type="text/javascript"> var op = document.getElementsByTagName("img")[0]; var oLi = document.getElementsByTagName("li"); var count =1; var timer = setInterval(function () { op.src = "img/"+count+".jpg"; for ( var i=0;i<oLi.length;i++ ){ oLi[i].className = ''; } oLi[count-1].className = "orange"; count++; if (count>8){ count=1; } },1000) </script> </body> </html>
範例圖:
#相關推薦:
js陣列去重的方法有哪些? js陣列去重五種方法總結(附程式碼)
##以上是js如何利用setInterval定時器方法實作輪播圖 (完整程式碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!