原生JavaScript實(shí)現(xiàn)輪播圖
本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)輪播圖的具體代碼，供大家參考，具體內(nèi)容如下
效果：
代碼：
<!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://www.leifengta.com.cn/bcjs/img/b1.jpg' alt='' /></li> <li><img src='http://www.leifengta.com.cn/bcjs/img/b2.jpg' alt='' /></li> <li><img src='http://www.leifengta.com.cn/bcjs/img/b3.jpg' alt='' /></li> <li><img src='http://www.leifengta.com.cn/bcjs/img/b4.jpg' alt='' /></li> <li><img src='http://www.leifengta.com.cn/bcjs/img/b5.jpg' alt='' /></li> <li><img src='http://www.leifengta.com.cn/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); //聲明一個(gè)變量，代表當(dāng)前圖片的下標(biāo) 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(); } // 小圓點(diǎn)效果 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>
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. 理解PHP5中static和const關(guān)鍵字2. IntelliJ IDEA安裝插件的方法步驟3. php模擬實(shí)現(xiàn)斗地主發(fā)牌4. .Net Core使用Coravel實(shí)現(xiàn)任務(wù)調(diào)度的完整步驟5. Vue封裝一個(gè)TodoList的案例與瀏覽器本地緩存的應(yīng)用實(shí)現(xiàn)6. jQuery 實(shí)現(xiàn)DOM元素拖拽交換位置的實(shí)例代碼7. Vuex localStorage的具體使用8. vue 使用localstorage實(shí)現(xiàn)面包屑的操作9. spring acegi security 1.0.0 發(fā)布10. MyBatis中的JdbcType映射使用詳解
網(wǎng)公網(wǎng)安備