前面有分享過改變層級的輪播圖算法，今天繼續(xù)利用透明度來實現(xiàn)無位移的輪播圖算法。
實現(xiàn)邏輯：將所有要輪播的圖片全部定位到一起，即一層一層摞起來，并且利用層級的屬性調(diào)整正確的圖片順序，將圖片的透明度全部設(shè)置為0，然后在讓初始的第一張圖片的透明度為1即可，具體算法如下：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>改變透明度算法(經(jīng)典)</title> <style media="screen"> * { margin: 0; padding: 0; } .wrap { width: 60%; margin: auto; position: relative; } .wrap img { width: 100%; position: absolute; left: 0; top: 0; transition: 2s; } .wrap img:nth-child(1) { position: relative; } .wrap .follow { width: 150px; height: 30px; margin: auto; display: flex; justify-content: space-between; } .wrap .follow span { width: 10px; height: 10px; border-radius: 50%; border: 3px solid gray; } .wrap .follow span:hover { cursor: pointer; } </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="" /> <input id="leftBut" type="button" name="name" value="◀︎"> <input id="rightBut" type="button" name="name" value="▶︎"> <div class="follow"> <span></span> <span></span> <span></span> <span></span> </div> </div> </body> <script type="text/javascript"> // 獲取所需元素var images = document.querySelectorAll('.wrap img'); var spans = document.querySelectorAll('.follow span'); var leftBut = document.getElementById('leftBut'); var rightBut = document.getElementById('rightBut'); // 定義有參函數(shù)function showImage(index) { for (var i = 0; i < images.length; i++) { spans[i].index = i;//自定義屬性，得到對應(yīng)的下標(biāo)images[i].index = i;//自定義屬性，得到對應(yīng)的下標(biāo)images[i].style.zIndex = 100 - i;//為圖片排列順序images[i].style.opacity = '0';//將圖片透明度全部賦值為0 spans[i].style.background = 'gray';//圓點北京色全部設(shè)置為黑色} //將傳入?yún)?shù)下標(biāo)值的圖片透明度賦值為 1 images[index].style.opacity = '1'; //將傳入?yún)?shù)下標(biāo)值的圖片的背景色賦值為white spans[index].style.background = 'white'; } showImage(0);//初始設(shè)置下標(biāo)為0的圖片和圓點的樣式 var count = 1;//獲取計數(shù)器// 定義自動輪播函數(shù)function imageMove() { // 判斷count的值如果能被4整除，則將count重新賦值為0；if (count % 4 == 0) { count = 0; } // 將count值當(dāng)做參數(shù)傳給函數(shù)showImage(); showImage(count); count++;//執(zhí)行一次 ＋1 } // 設(shè)置兩秒調(diào)用一次函數(shù)imageMove()，并且賦值給imageInitailMove var imageInitailMove = setInterval('imageMove()', 2000); // 向左點擊事件leftBut.onclick = function() { // 先清除定時器clearInterval(imageInitailMove); // 由于和自動輪方向相反所以要判斷count的值當(dāng)值為0時，重新賦值為4，繼續(xù)循環(huán)if (count == 0) { count = 4; } count--;showImage(count);//調(diào)用函數(shù)count先自－imageInitailMove = setInterval('imageMove()', 2000); } // 向右的點擊事件rightBut.onclick = function() { clearInterval(imageInitailMove); imageMove();//由于和自動輪播的方向相同所以直接調(diào)用// 重新為定時器賦值imageInitailMove = setInterval('imageMove()', 2000); } // 圓點的點擊事件for (var i = 0; i < spans.length; i++) { spans[i].onclick = function() { clearInterval(imageInitailMove); // 將當(dāng)前點擊的圓點的下標(biāo)值賦值給count count = event.target.index; // 調(diào)用函數(shù)showImage(count); imageInitailMove = setInterval('imageMove()', 2000); } } </script></html>精彩專題分享：jQuery圖片輪播 JavaScript圖片輪播 Bootstrap圖片輪播
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
