本文實例講述了原生JS實現的簡單輪播圖功能。分享給大家供大家參考，具體如下：
經過幾天的努力，終于攻克了這一難題，于是迫不及待的想要分享給大家，編寫之前，我也看了不少其他博主的博客，大多是用偏移量寫的，對新手來說，還是有些難以理解，雖然可能實現的需求不一樣，但我想先從簡入手，所以自己查閱資料，修改bug，終于完成。話不多說，上代碼：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>www.49028c.com JS輪播圖</title><script src="jquery.js"></script><style>*{margin: 0px;padding:0px;list-style: none;text-decoration: none;}#flash{ /*根據圖片的大小來設置外層div的大小*/width: 520px;height: 280px;margin: 0 auto;position: relative; /*設置div定位，方便之后圖片及圓點位置的設定*/border:1px solid black;}#flash img{width: 100%;height: 100%;position: absolute; /*設置所有圖片重疊*/left: 0px;top: 0px;display: none; /*設置所有圖片隱藏，通過改變第一個圖片的行間樣式來使第一個圖片顯示*/}#flash ul{width: 150px;height: 25px;border-radius: 20px;background-color:rgba(255,255,255,0.5);position: absolute;left: 35%;bottom: 10%;}#flash ul li{width: 12px;height: 12px;margin-top:5px;background-color: #fff;border-radius: 50%;margin-left: 15px;float: left;}#flash ul .li_1{background-color: #f40; /*設置第一個圓點背景色為紅色*/}#flash .span-r{width: 50px;height: 50px;border-radius: 50%;position: absolute;right: 2%;top: 45%;background-color: rgba(255,255,255,0.5);}#flash .span-r span{width: 100%;height:100%;color:rgba(0,0,0,0.5);font-size: xx-large;font-weight: 700;line-height: 50px;margin-left: 15px;cursor: pointer;}#flash .span-l{width: 50px;height: 50px;border-radius: 50%;position: absolute;left: 2%;top: 45%;background-color: rgba(255,255,255,0.5);}#flash .span-l span{width: 100%;height:100%;color:rgba(0,0,0,0.5);font-size: xx-large;font-weight: 700;line-height: 50px;margin-left: 15px;cursor: pointer;}</style></head><div id="flash"><img src="http://demo.VeVB.COm/js/2018/html5-css3-3d-img-flash-codes/images/Guardians-of-the-Galaxy-Poster-High-Res.jpg" alt="" style="display: block"><img src="http://demo.VeVB.COm/js/2018/html5-css3-3d-img-flash-codes/images/Blade-Runner-poster-art-Harrison-Ford.jpg" alt=""><img src="http://demo.VeVB.COm/js/2018/html5-css3-3d-img-flash-codes/images/2017_alien_covenant_4k-5120x2880-1920x1080.jpg" alt=""><img src="http://demo.VeVB.COm/js/2018/html5-css3-3d-img-flash-codes/images/robocop-1987-wallpaper-2.jpg" alt=""><img src="http://demo.VeVB.COm/js/2018/html5-css3-3d-img-flash-codes/images/sJALsDXak4EehSg2F2y92rt5hPe.jpg" alt=""><ul><li class="li_1"></li><li></li><li></li><li></li><li></li></ul><div class="span-r"><span>></span></div><div class="span-l"><span><</span></div></div><body><script>var div = document.getElementById('flash');var img = div.getElementsByTagName('img'); /*選中div下所有的圖片*/var ul = document.getElementsByTagName('ul')[0];var li = ul.getElementsByTagName('li');var div_r = document.getElementsByTagName('div')[1];// var span_r = div_r.getElementsByTagName('span');var div_l = document.getElementsByTagName('div')[2];// var sapn_l = div_l.getElementsByTagName('span');var len = img.length;var count = 0; /*設置count來顯示當前圖片的序號*/function run(){ /*將定時器里的函數提取到外部*/count++;count = count==5?0:count; /*當圖片加載到最后一張時，使其歸零*/for(var i=0;i<len;i++){img[i].style.display = 'none'; /*利用for循環使除當前count位其他圖片隱藏*/}img[count].style.display = 'block'; /*顯示當前count的值所代表的圖片*/for(var i=0;i<li.length;i++){li[i].style.backgroundColor = "#fff"; /*原理同上*/}li[count].style.backgroundColor = "#f40";}var timer = setInterval(run,1000); /*定義定時器，使圖片每隔1s更換一次*/div.onmouseover = function(){clearInterval(timer);}div.onmouseleave = function(){ /*定義鼠標移出事件，當鼠標移出div區域，輪播繼續*/timer = setInterval(run,1000);}for(var i=0;i<len;i++){li[i].index = i; /*定義index記錄當前鼠標在li的位置*/li[i].onmouseenter = function(){ /*定義鼠標經過事件*/for(var i=0;i<len;i++){ /*通過for循環將所有圖片隱藏，圓點背景設為白色*/li[i].style.background = '#fff';img[i].style.display = 'none';}this.style.background = '#f40'; /*設置當前所指圓點的背景色*/img[this.index].style.display = 'block'; /*使圓點對應的圖片顯示*/}}div_r.onclick = function(){ /*因為span沒有設置寬高，直接把事件添加到他的父級*/run(); /*直接調用現成的run函數*/}function reverse(){count--;count = count==-1?4:count;for(var i=0;i<len;i++){img[i].style.display = 'none'; /*利用for循環使除當前count位其他圖片隱藏*/}img[count].style.display = 'block'; /*顯示當前count的值所代表的圖片*/for(var i=0;i<li.length;i++){li[i].style.backgroundColor = "#fff"; /*原理同上*/}li[count].style.backgroundColor = "#f40";}div_l.onclick = function(){reverse(); /*重新設置函數*/}</script></body></html>這里使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.VeVB.COm/code/HtmlJsRun，測試運行效果如下：
感興趣的朋友可以自己動手測試一下。
更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript圖片操作技巧大全》、《JavaScript切換特效與技巧總結》、《JavaScript運動效果與技巧匯總》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
