快捷導(dǎo)航

js改變透明度實現(xiàn)輪播圖的算法

更新時間：2020年08月24日 15:05:48 作者：有點追求

這篇文章主要為大家詳細(xì)介紹了js改變透明度實現(xiàn)輪播圖的算法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

前面有分享過改變層級的輪播圖算法，今天繼續(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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: