當前位置:網站首頁>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

隨機推薦