本文鏈接：https://blog.csdn.net/qq_41481924/article/details/80515766
項目地址：https://github.com/yearshearn/banner
輪播圖現在有很多插件都可以用的，但是自己手寫的就很少了。
寫了一個簡單的demo沒有加動畫的效果代碼如下：
<!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>Document</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="img1.jpg" alt="" style="display: block"> <img src="img2.jpg" alt=""> <img src="img3.jpg" alt=""> <img src="img4.jpg" alt=""> <img src="img5.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>
輪播就是將所有圖片疊加，然后利用display屬性將不需要顯示的圖片隱藏。