欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于JavaScript實現(xiàn)頁面輪播圖漸變效果的示例代碼

 更新時間：2023年10月25日 11:11:25   作者：sharkerrrr  
這篇文章主要給大家分享如何使用JavaScript實現(xiàn)一個頁面輪播圖漸變效果,輪播圖是網(wǎng)頁開發(fā)中常見的功能之一,它能夠展示多個圖片或內(nèi)容,并以一定的時間間隔進行自動切換,而通過添加漸變效果,可以讓切換過程更加平滑流暢,感興趣的小伙伴可以自己動手嘗試一下

在開始之前，我們需要準備一些基本的HTML和CSS。

HTML結(jié)構(gòu)：

<div class="focus ">
			<ul class="carousel">				                       
				<li class="opa"><a href=""><img src=" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" https://p1-q.mafengwo.net/s19/M00/08/1E/CoNB_WU2Z10Pona2ACzRRnW5ARY.png?imageView2%2F2%2Fw%2F1920%2Fq%2F90%2Fformat%2Fjpeg" alt=""></a></li>
				<li><a href=""><img src=" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" https://p1-q.mafengwo.net/s19/M00/92/FF/CoNB_GUzmHJqChXuACW_FtT4Ioo.png?imageView2%2F2%2Fw%2F1920%2Fq%2F90%2Fformat%2Fjpeg" alt=""></a></li>
				<li><a href=""><img src=" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" https://p1-q.mafengwo.net/s19/M00/70/34/CoNFT2Uzk0xJFMtNACnheGMnxbw.png?imageView2%2F2%2Fw%2F1920%2Fq%2F90%2Fformat%2Fjpeg" alt=""></a></li>
            </ul>
			<div class="arrowLeft">&lt;</div>  <!-- 左側(cè)按鈕 -->
			<div class="arrowRight">&gt;</div> <!-- 右側(cè)按鈕 -->
			<ol class="disc"> 
			</ol>
		</div>

CSS樣式：

.focus {
	position: relative;
	width: 100%;
	height: 500px;
	margin-top: 0px;
	overflow: hidden;
    
}


.carousel {
	position: relative;
    top: 0px;
	width: 100%;
    height: 100%;
	left: 0px;
    bottom: 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: 100%;
	height: auto; /*高度自適應*/ /*height: 100%; */ /*高度設為100%會超出容器高度*/
 object-fit: cover; /*圖片自適應大小并保持原比例*/
}

.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; /*鼠標指針變?yōu)槭中?/ 
}

.arrowLeft {
	left: 10px;
}

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

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

}

}

現(xiàn)在讓我們開始編寫JavaScript代碼來實現(xiàn)輪播圖漸變效果。

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;
//動態(tài)生成小圓點
	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';
	
	//點擊右側(cè)箭頭
	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';
	})
	// 點擊左側(cè)按鈕
	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';
	})
	//自動播放，像點擊右側(cè)按鈕
	var timer = setInterval(function() {
		arrowRight.click();
	}, 3000);
})

讓我們來解釋一下代碼的實現(xiàn)邏輯：

1. 首先，代碼通過window.addEventListener('load', function () {...})監(jiān)聽頁面加載完成的事件，這保證了代碼在頁面元素加載完畢后執(zhí)行。

2. 代碼使用querySelector方法獲取了輪播圖的相關元素，包括輪播圖容器、左箭頭和右箭頭。

3. 鼠標移動到輪播圖容器上時，觸發(fā)mouseover事件的回調(diào)函數(shù)。在回調(diào)函數(shù)中，左右箭頭的display屬性被設置為block，即顯示出來。同時，通過調(diào)用clearInterval清除定時器timer，并將其置為null，實現(xiàn)停止自動播放。

4. 鼠標移出輪播圖容器時，觸發(fā)mouseout事件的回調(diào)函數(shù)。在回調(diào)函數(shù)中，左右箭頭的display屬性被設置為none，即隱藏起來。通過調(diào)用setInterval設置定時器timer，每隔3秒點擊一次右箭頭，實現(xiàn)自動播放。

5. 代碼通過querySelector方法獲取輪播圖容器中的ul和ol元素，分別代表圖片列表和圓點列表。

6. 通過變量num獲取圖片列表中的子元素數(shù)量。

7. 使用for循環(huán)遍歷圖片列表的子元素數(shù)量，動態(tài)生成與圖片數(shù)量相同的圓點，并將其添加到圓點列表中。同時為每個圓點添加點擊事件的回調(diào)函數(shù)，在回調(diào)函數(shù)中處理圓點點擊切換圖片的邏輯。

8. 默認將第一個圓點添加current類名，表示當前活動圓點。

9. 當點擊右側(cè)箭頭時，觸發(fā)click事件的回調(diào)函數(shù)。在回調(diào)函數(shù)中，圓點的樣式進行更新，通過添加和刪除current類名來實現(xiàn)圓點的樣式切換。同時，圖片的樣式也進行更新，通過添加和刪除opa類名來實現(xiàn)圖片的切換。

10. 當點擊左側(cè)箭頭時，觸發(fā)click事件的回調(diào)函數(shù)。邏輯與點擊右側(cè)箭頭類似，只是圓點和圖片的切換順序相反。

11. 最后，通過設置定時器timer實現(xiàn)自動播放功能。定時器每隔3秒點擊一次右側(cè)箭頭，從而切換到下一張圖片。

通過以上代碼的實現(xiàn)，我們成功地實現(xiàn)了采用JavaScript的頁面輪播圖漸變效果。

到此這篇關于基于JavaScript實現(xiàn)頁面輪播圖漸變效果的示例代碼的文章就介紹到這了,更多相關JavaScript實現(xiàn)頁面輪播圖漸變內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

最新評論