时间:2021-07-01 10:21:17 帮助过:15人阅读
以前去面试的面试的时候 ,面试官直接叫我手写一个轮播图,那是刚出来,所以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数组去重五种方法总结(附代码)
jquery中图片无序预加载的实现以及使用方法
以上就是js如何利用setInterval定时器方法实现轮播图 (完整代码)的详细内容,更多请关注Gxl网其它相关文章!