當前位置：網站首頁>js輪播圖效果，透明度漸變實現

js輪播圖效果，透明度漸變實現

2022-05-14 19:19:47【蒲公英1001】

昨天學習了輪播圖的制作，是定義了動畫左右滾動實現的，這需要在最後追加一個列錶項，以實現無縫滾動。學完後到小米官網看了一下，發現其輪播圖不是滾動效果的，我覺得這個實現起來更簡單，可以通過設置display或opacity屬性實現。
我先用了display屬性，采用絕對定比特，把幾張圖片重疊在一起，所有列錶項初始狀態為none，第一項的初始狀態為block，當點擊某個小圓點時，使用排他思想，所有項狀態為display:none，當前項為display:block。程序正常運行了。
我又想把css屬性換成不透明度opacity，讓當前的圖片不透明，其他圖片透明，效果和display應該是差不多的。
根據這個思路，我又修改了display的代碼，把display換成opacity，我自認為邏輯思路很對，可最後運行的時候，除了第一張正常顯示，其餘兩張都不顯示，是空白。可查看運行狀態，當前項又確實是不透明的，可就是顯示不出來。
我很奇怪，display可以，為什麼opacity不可以呢，理論上不是效果差不多的嗎？
於是開始排錯，可是控制臺顯示沒有錯誤，小圓點的變化正常。先看js代碼，沒錯，再看html結構，沒問題，找了一個上午，最後才發現是css的問題，列錶項的定比特一定要設置成absolute，我設置了，但是我不小心把position這個單詞敲錯了，漏了一個字符i，變成了postion，導致列錶項沒有絕對定比特，我這個鬱悶啊，耽誤了一上午的時間。
問題的關鍵在於，display和opactiy雖然都是不可見，但是display直接不占用空間，所以是否絕對定比特對結果沒有影響，opacity雖然也不可見，但是還占用著空間，所以絕對定比特對結果是有影響的。絕對定比特因為出錯未生效，導致幾個列錶項沒有重疊，所以第1張後的圖片的比特置不是（0，0），而是在圖片的下方，被overflow：hidden隱藏掉了。
下面是運行正常的代碼，這回可長記性了。
1.rotation.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>輪播圖-透明度實現</title>
		<link rel="stylesheet" href="css/rotation.css">
		<script src="js/rotate.js" charset="utf-8"></script>
	</head>
	<body>
		<div class="focus">
			<ul class="carousel">				                       <!-- 輪播圖列錶 -->
				<li class="opa"><a href="#"><img src="images/1.jpg" alt=""></a></li>
				<li><a href="#"><img src="images/2.jpg" alt=""></a></li>
				<li><a href="#"><img src="images/3.jpg" alt=""></a></li>
			</ul>
			<div class="arrowLeft">&lt;</div>  <!-- 左側按鈕 -->
			<div class="arrowRight">&gt;</div> <!-- 右側按鈕 -->
			<ol class="disc"> 
			</ol>
		</div>
	</body>
</html>

2.rotation.css文件

* {
    
	margin: 0;
	padding: 0;
}

ul,ol,li {
    
	list-style: none;
}

.focus {
    
	position: relative;
	width: 1000px;
	height: 375px;
	margin: 10px auto;
	overflow: hidden;
}

.carousel {
    
	position: absolute;
	width: 100%;
	left: 0px;
	top: 0px;
}

.carousel li {
    
	position: absolute;  /*絕對定比特*/
	top: 0px;
	left: 0px;
	opacity: 0;
	transition: all 1s;  /*設置切換時過渡效果*/
}

.carousel li.opa {
      /*li和.opa之間,無空格*/
	opacity: 1;
}

.carousel li img {
    
	width: 1000px;
	height: 375px;
}

.focus div {
    
	display: none;
	position: absolute;
	top: 50%;
	transform: translate(0, -50%); 	/*上移，使垂直居中*/
	width: 36px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	color: #fff;
	font-size: 36px;
	z-index: 99;
	cursor: pointer;
}

.arrowLeft {
    
	left: 10px;
}

.arrowRight {
    
	right: 10px;
}
.arrowLeft:hover,.arrowRight:hover {
    
	background-color: rgba(128, 128, 128, .5);
}
.disc {
    
	position: absolute;
	bottom: 10px;
	right: 50px;
	z-index: 99;
}
.disc li {
    
	display: inline-block;
	width: 8px;
	height: 8px;
	background-color: #ccc;
	margin: 0 3px;
	border-radius: 50%;
	cursor: pointer;
}

.disc li.current {
      /*li和.current之間,無空格*/
	background-color: #f00;
}

3.rotate.js文件

	window.addEventListener('load', function () {
    
	var focus = document.querySelector('.focus');
	var arrowLeft = document.querySelector('.arrowLeft');
	var arrowRight = document.querySelector('.arrowRight');
	//鼠標移動到輪播圖，左右箭頭顯示
	focus.addEventListener('mouseover', function() {
    
		arrowLeft.style.display = 'block';
		arrowRight.style.display = 'block';
		clearInterval(timer); //清除定時器
		timer = null;
	})
	focus.addEventListener('mouseout', function() {
    
		arrowLeft.style.display = 'none';
		arrowRight.style.display = 'none';
		timer = setInterval(function() {
     //鼠標離開，開啟定時器
			arrowRight.click();
		}, 3000);
	})

	var ul = focus.querySelector('ul');
	var ol = focus.querySelector('ol');
	var num=ul.children.length;
	var disc = 0;
//動態生成小圓點
	for (let i = 0; i < num; i++) {
    
		var li = document.createElement('li');
		ol.appendChild(li);
		li.addEventListener('click', function() {
    
			for (let k = 0; k < num; k++) {
    
				ol.children[k].className = '';
				ul.children[k].className = '';
			}
			this.className = 'current';
			ul.children[i].className = 'opa';
			disc = i;
		})
	}
  ol.children[0].className ='current';
	
	//點擊右側箭頭
	arrowRight.addEventListener('click', function() {
    
		disc++; //圓點樣式
		if (disc == num) {
    
			disc = 0;
		}
		for (let k = 0; k < num; k++) {
    
			ol.children[k].className = '';
			ul.children[k].className = '';
		}
		ol.children[disc].className = 'current';
		ul.children[disc].className = 'opa';
	})
	// 點擊左側按鈕
	arrowLeft.addEventListener('click', function() {
    
		disc--;
		if (disc < 0) {
    
			disc = num - 1;
		}
		for (let k = 0; k < num; k++) {
    
			ol.children[k].className = '';
			ul.children[k].className = '';
		}
		ol.children[disc].className = 'current';
		ul.children[disc].className = 'opa';
	})
	//自動播放，像點擊右側按鈕
	var timer = setInterval(function() {
    
		arrowRight.click();
	}, 3000);
})

測試代碼的時候，發現使用opacity有過渡效果，使用display的時候，transition好像不起作用，懷疑transition對display：none無效，去查找了一下，果然如此。
display:none的時候，頁面文檔流中將不會存在該元素，display:block的時候，文檔流中才存在該元素。transition屬性無法對一個從無到有的元素進行過渡顯示。
看來要有漸變效果，只能用opacity了。

版權聲明
本文為[蒲公英1001]所創，轉載請帶上原文鏈接，感謝
https://cht.chowdera.com/2022/134/202205141801565804.html

邊欄推薦

猜你喜歡

隨機推薦