原生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.cgvv.com.cn/bcjs/img/b1.jpg' alt='' /></li> <li><img src='http://www.cgvv.com.cn/bcjs/img/b2.jpg' alt='' /></li> <li><img src='http://www.cgvv.com.cn/bcjs/img/b3.jpg' alt='' /></li> <li><img src='http://www.cgvv.com.cn/bcjs/img/b4.jpg' alt='' /></li> <li><img src='http://www.cgvv.com.cn/bcjs/img/b5.jpg' alt='' /></li> <li><img src='http://www.cgvv.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>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. 在Android中使用WebSocket實(shí)現(xiàn)消息通信的方法詳解2. 淺談python出錯(cuò)時(shí)traceback的解讀3. Python importlib動(dòng)態(tài)導(dǎo)入模塊實(shí)現(xiàn)代碼4. python matplotlib:plt.scatter() 大小和顏色參數(shù)詳解5. windows服務(wù)器使用IIS時(shí)thinkphp搜索中文無效問題6. ASP 信息提示函數(shù)并作返回或者轉(zhuǎn)向7. Nginx+php配置文件及原理解析8. 利用promise及參數(shù)解構(gòu)封裝ajax請(qǐng)求的方法9. .NET中l(wèi)ambda表達(dá)式合并問題及解決方法10. JSP數(shù)據(jù)交互實(shí)現(xiàn)過程解析
網(wǎng)公網(wǎng)安備