輪播圖在以后的應用中還是比較常見的，不需要多少行代碼就能實現。但是在只掌握了js基礎知識的情況下，怎么來用較少的而且邏輯又簡單的方法來實現呢？下面來分析下幾種不同的做法：
1、利用位移的方法來實現
首先，我們可以在body中添加一個div并且將寬度設置成百分比（自適應頁面），比例具體是相對誰的百分比的話按需求來做，在這里不多說。將圖片放入到div 中。
其次，樣式部分將img標簽全部設置成absolute；以方便定位
最后，js部分說說邏輯，定義兩個空數組，第一個數組用來保存初始的顯示在頁面的圖片和等待進入的圖片，第二個數組保存其余的n張圖片，假設這兩個數組分別設置為：waitToShow=[]; 和 goOut=[]; waitToShow.shift();彈出第一張圖片假如命名為showFirst，并為showFirst圖片設置位移和移動時間，執行完成之后showFirst放入goOut尾部：goOut.push(showFirst); 這時waitToShow數組的第0個元素就變成原來的第二張要顯示的圖片，給這個圖片waitToShow[0]設置位移和移動時間，并且將goOut數組的首元素圖片彈出來，在放進waitToShow數組的尾部，保證waitToShow數組永遠是一張顯示的圖片和待顯示的圖片，這樣就通過兩個數組形成了一個循環來完成輪播圖的實現。反向的邏輯是一樣的（由于邏輯過于復雜這里不推薦）
2、利用層級的高低來使最頂部圖片變化的做法（這個做法沒有位移的動作，但是邏輯卻非常簡便，很實用）
直接來代碼更直觀點：基本每行都有注釋
<!DOCTYPE html><html><head><meta charset="utf-8"><title>輪播圖 (閃現 自適應)</title><style media="screen">* {margin: 0;padding: 0;}.wrap {width: 60%;background: red;margin: auto;position: relative;}.wrap img {width: 100%;position: absolute;/*z-index: 10;*/}input {border: 1px solid lightgray;width: 50px;height: 30px;background: red;border-radius: 5px;font-size: 20px;}</style></head><body><div class="wrap"><img src="img/01.jpg" alt="" /><img src="img/02.jpg" alt="" /><img src="img/03.jpg" alt="" /><img src="img/04.jpg" alt="" /></div><input type="button" id="butLeft" name="name" value="◀︎"><input type="button" id="butRight" name="name" value="▶︎"></body><script type="text/javascript">// 獲取images元素生成字符串數組，字符串數組不能進行push pop splice 等操作// 所以要將它的值重新存放進一個數組中，后面有定義var images = document.getElementsByTagName('img');var butLeft = document.getElementById('butLeft');var butRight = document.getElementById('butRight');//獲取變量index 用來為后面設置層級用var index = 1000;// 獲取一個空的數組，用來存放images里面的字符串元素var imagess = [];// for循環用來給imagess數組賦值，并且改變數組中的元素的層級for (var i = 0; i < images.length; i++) {imagess[i] = images[i];var currentImage = imagess[i];// 當前圖片的層級的設置，一輪for循環都為他們設置了初始的zIndex，圖片越靠前，層級設置// 要求越高，所以用的是－i,這樣圖片會按順序從第一張，第二張.....依次向下currentImage.style.zIndex = -i;}// 設置計數器count，執行一次點擊事件（向左或者向右）count加1var count = 0;// 向左的點擊事件butLeft.onclick = function() {// 從數組頭部彈出一個圖片元素var showFirst = imagess.shift();// 給彈出的這個圖片元素設置層級，即 －1000+count，// 讓層級相較其他元素是最小的，數組頭部彈出的圖片會顯示在最底層showFirst.style.zIndex = - index + count;// 層級改變完成后再將他push進數組的尾部imagess.push(showFirst);// 點擊一次加1，不用考慮具體的值，只需要有點擊事件加 1count++;}// 向右點擊事件butRight.onclick = function() {// 從imagess的尾部彈出一個元素，并賦值給showFirstvar showFirst = imagess.pop();// 設置showFirst的層級為最大，1000+count ，這樣他會顯示在第一層showFirst.style.zIndex = index + count;// 層級改變之后將他在插入數組imagess的頭部imagess.unshift(showFirst);// 點擊一次加1count++;}</script></html>以上這篇js 基礎篇必看(點擊事件輪播圖的簡單實現)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
