原生JavaScript實現輪播圖
本文實例為大家分享了JavaScript實現輪播圖的具體代碼，供大家參考，具體內容如下
效果：
代碼：
<!DOCTYPE html><html> <head> <meta charset='UTF-8'> <title></title> <style> * { margin: 0; padding: 0; } ul, li { list-style: none; } .banner { width: 1200px; height: 535px; border: 1px solid red; margin: 0 auto; position: relative; } .slider li { position: absolute; left: 0; top: 0; } a { width: 40px; height: 50px; background-color: rgba(0, 0, 0, 0.1); font-size: 50px; text-align: center; line-height: 50px; position: absolute; text-decoration: none; color: gray; } .btnl { left: 0; top: 50%; margin-top: -15px; } .btnr { right: 0; top: 50%; margin-top: -25px; } .tabs { position: absolute; bottom: 20px; left: 50%; margin-left: -75px; } .tabs li { width: 15px; height: 15px; background-color: #ccc; border-radius: 50%; float: left; margin-right: 10px; } </style> </head> <body> <div class='banner'> <ul class='slider'> <li><img src='http://m.b3g6.com/bcjs/img/b1.jpg' alt='' /></li> <li><img src='http://m.b3g6.com/bcjs/img/b2.jpg' alt='' /></li> <li><img src='http://m.b3g6.com/bcjs/img/b3.jpg' alt='' /></li> <li><img src='http://m.b3g6.com/bcjs/img/b4.jpg' alt='' /></li> <li><img src='http://m.b3g6.com/bcjs/img/b5.jpg' alt='' /></li> <li><img src='http://m.b3g6.com/bcjs/img/b6.jpg' alt='' /></li> </ul> <a href='javascript:void(0);' class='btnl'> <</a> <a href='javascript:void(0);' class='btnr'>></a> <ul class='tabs'> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <script type='text/javascript'> var banner = document.getElementsByClassName('banner')[0]; var slider = document.getElementsByClassName('slider')[0]; var li = slider.getElementsByTagName('li'); var btnl = document.getElementsByClassName('btnl')[0]; var btnr = document.getElementsByClassName('btnr')[0]; var tabs = document.getElementsByClassName('tabs')[0]; var btns = tabs.getElementsByTagName('li'); //初始化 btns[0].style.backgroundColor = 'red'; for(var i = 0; i < li.length; i++) { if(i == 0) { continue; } else { li[i].style.opacity = 0; } } var timer = setInterval(mover, 1000); //聲明一個變量，代表當前圖片的下標 var num = 0; function mover() { num++; if(num == li.length) { num = 0; } for(var i = 0; i < li.length; i++) { li[i].style.opacity = 0; btns[i].style.backgroundColor = '#ccc'; } li[num].style.opacity = 1; btns[num].style.backgroundColor = 'red'; } function movel() { num--; if(num == -1) { num = li.length - 1; } for(var i = 0; i < li.length; i++) { li[i].style.opacity = 0; btns[i].style.backgroundColor = '#ccc'; } li[num].style.opacity = 1; btns[num].style.backgroundColor = 'red'; } banner.onmouseover = function() { clearInterval(timer) } banner.onmouseout = function() { timer = setInterval(mover, 1000) } btnl.onclick = function(e) { movel(); } btnr.onclick = function(e) { mover(); } // 小圓點效果 for(var i = 0; i < btns.length; i++) { btns[i].index = i; btns[i].onmouseover = function() { if(this.index == num) { return; } else { for(var i = 0; i < li.length; i++) { li[i].style.opacity = 0; btns[i].style.backgroundColor = '#ccc'; } li[this.index].style.opacity = 1; btns[this.index].style.background='red'; num=this.index; } } } </script> </body></html>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。
相關文章：
網公網安備