怎么在HTML5中實(shí)現(xiàn)簡(jiǎn)易輪播圖

發(fā)布時(shí)間：2022-02-21 16:39:01 來(lái)源：億速云閱讀：473 作者：iii 欄目：開(kāi)發(fā)技術(shù)

這篇“怎么在HTML5中實(shí)現(xiàn)簡(jiǎn)易輪播圖”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來(lái)看看這篇“怎么在HTML5中實(shí)現(xiàn)簡(jiǎn)易輪播圖”文章吧。

輪播圖原理大概是這樣的，假定三張圖片需要做輪播效果，首先需要將這三張圖片并列放置，然后將這個(gè)整體并列向左移動(dòng)，每當(dāng)一張圖片完整的從顯示框走出，則將這張圖片放置到最后面，循環(huán)往復(fù)就可以實(shí)現(xiàn)圖片向左（或一個(gè)方向）移動(dòng)。然后，需要有兩個(gè)定時(shí)器，一個(gè)定時(shí)器A控制三張圖片整體左移速度，另一個(gè)定時(shí)器B控制每當(dāng)一張完整的圖片走進(jìn)這個(gè)顯示框就等待一到兩秒得到更好的用戶(hù)體驗(yàn)。
我這里用三個(gè)div框當(dāng)作輪播圖來(lái)演示。
在html的body中添加一個(gè)div作為顯示框，然后在這個(gè)div內(nèi)部添加三個(gè)子div作為圖片顯示。代碼如下：

<div id="box">
	<div id="red" class="slide"></div>
	<div id="green" class="slide"></div>
	<div id="blue" class="slide"></div>
</div>

頭部添加css樣式：

此時(shí)網(wǎng)頁(yè)中應(yīng)該是有一個(gè)黑色顯示框div，內(nèi)部有紅、綠、藍(lán)三個(gè)div框,三個(gè)框從上到下排列。
第一步，需要將三張圖片都并列顯示。
要實(shí)現(xiàn)將div挪動(dòng)，且div比較方便控制每時(shí)每刻的位置(移動(dòng))，只能使用相對(duì)定位，且為方便，三個(gè)子div位置移動(dòng)應(yīng)該是相對(duì)box，所以box應(yīng)該作為相對(duì)的參照點(diǎn)。分別為box和slide代碼添加position屬性：

#box{
	width:100px;
	height:100px;
	border:1px solid black;
	position:relative;
}
.slide{
	width:100px;
	height:100px;
	position:absolute;
}

為整個(gè)頁(yè)面添加onload加載完成事件，當(dāng)瀏覽器打開(kāi)并加載完并自動(dòng)執(zhí)行事件中的代碼塊。這部分js代碼寫(xiě)在剛才css下面即可，保持同級(jí)結(jié)構(gòu)。

 <script type="text/javascript">
onload=function(){
	var arr = document.getElementsByClassName("slide");
	for(var i=0;i<arr.length;i++){
		arr[i].style.left = i*100+"px";
	}
}
</script>

當(dāng)頁(yè)面加載完全，三個(gè)div應(yīng)該并列在一起。
接下來(lái)，需要實(shí)現(xiàn)將這三個(gè)div整體向左移動(dòng)，使用定時(shí)器，即前面的定時(shí)器A。*onload同級(jí)下面添加如下代碼：

function LeftMove(){
		var arr = document.getElementsByClassName("slide");//獲取三個(gè)子div
		for(var i=0;i<arr.length;i++){
			var left = parseFloat(arr[i].style.left);
			left-=2;
			var width = 100;//圖片的寬度
			if(left<=-width){
				left=(arr.length-1)*width;//當(dāng)圖片完全走出顯示框，拼接到末尾
			}
			arr[i].style.left = left+"px";
		}
		}
	moveId=setInterval(LeftMove,10);//設(shè)置一個(gè)10毫秒定時(shí)器，并給自己取名
**此時(shí)，三個(gè)div已經(jīng)能夠緩慢向左移動(dòng)?，F(xiàn)在需要再開(kāi)啟一個(gè)定時(shí)器B，并將A定時(shí)器裝入到B定時(shí)器中，A的定時(shí)器時(shí)間間隔應(yīng)該長(zhǎng)于一個(gè)div完全走進(jìn)顯示框的時(shí)間，我這里設(shè)置為3秒。然后，將A定時(shí)器裝入到方法divInterval中，B定時(shí)器調(diào)用這個(gè)方法。且為了用戶(hù)體驗(yàn)效果更好，當(dāng)一個(gè)div完全走入顯示框后，應(yīng)該等待一段時(shí)間，再開(kāi)是移動(dòng)。所以在LeftMove方法中，*if判斷中還需關(guān)閉moveId這個(gè)定時(shí)器*，停止此時(shí)移動(dòng)的div定時(shí)器。當(dāng)3秒不到的時(shí)間后，定時(shí)器B又會(huì)開(kāi)啟一個(gè)新的定時(shí)器A。**
	if處添加一句代碼為：
		

if(left<=-width){
				left=(arr.length-1)*width;//當(dāng)圖片完全走出顯示框，拼接到末尾
				clearInterval(moveId);
			}
		
		function divInterval(){
		moveId=setInterval(LeftMove,10);//設(shè)置一個(gè)10毫秒定時(shí)器
		}
		timeId=setInterval(divInterval,3000);//設(shè)置一個(gè)3秒的定時(shí)器。

到這里，輪播圖基本已經(jīng)實(shí)現(xiàn)了。然后，還需要在css樣式中為box添加overflow,將超出顯示框的div隱藏。

	#box{
width:100px;
height:100px;
border:1px solid black;
position:relative;
overflow:hidden;}

然后為了解決當(dāng)鼠標(biāo)懸停在輪播圖，輪播圖停止輪播效果，需要在box上添加鼠標(biāo)移入和移出事件。開(kāi)始標(biāo)簽：

<div id="box" onmouseover="stop()" onmouseout="start()">

添加js代碼：

function stop(){
	clearInterval(timeId);//鼠標(biāo)停留關(guān)閉B定時(shí)器
}
function start(){
	clearInterval(timeId);//重新打開(kāi)一個(gè)定時(shí)前，先關(guān)閉之前定時(shí)器。
	timeId=setInterval(divInterval,2000);//重啟一個(gè)定時(shí)器
}

當(dāng)瀏覽器窗口切出或頁(yè)面切換到其他頁(yè)面一段時(shí)間再回來(lái)時(shí)，輪播效果會(huì)有短暫加速（隨切出時(shí)間加長(zhǎng)而加長(zhǎng)）。主要是因?yàn)殡m然窗口切出去了，定時(shí)器依然在執(zhí)行，但頁(yè)面卻沒(méi)有將效果顯示，所以切回來(lái)后會(huì)將之前的效果顯示出來(lái)而加速輪播圖。所以添加頁(yè)面焦點(diǎn)事件：

//頁(yè)面失去焦點(diǎn)定時(shí)器停止
onblur = function(){
	stop();
}
//頁(yè)面獲取焦點(diǎn)時(shí)重啟定時(shí)器
onfocus = function(){
	start();
}

全部代碼如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>輪播圖</title>
<style type="text/css">
	#box{
		width:100px;
		height:100px;
		border:1px solid black;
		position:relative;
		overflow:hidden;
	}
	#red{
		background-color:red;
		width:100px;
	}
	#green{
		background-color:green;
		width:100px;
	}
	#blue{
		background-color:blue;
		width:100px;
	}
	.slide{
		width:100px;
		height:100px;
		position:absolute;
	}
</style>
<script type="text/javascript">
	onload=function(){
		var arr = document.getElementsByClassName("slide");
		for(var i=0;i<arr.length;i++){
			arr[i].style.left = i*100+"px";
		}
	}
	function LeftMove(){
		var arr = document.getElementsByClassName("slide");//獲取三個(gè)子div
		for(var i=0;i<arr.length;i++){
			var left = parseFloat(arr[i].style.left);
			left-=2;
			var width = 100;//圖片的寬度
			if(left<=-width){
				left=(arr.length-1)*width;//當(dāng)圖片完全走出顯示框，拼接到末尾
				clearInterval(moveId);
			}
			arr[i].style.left = left+"px";
		}
	}
	function divInterval(){
		moveId=setInterval(LeftMove,10);//設(shè)置一個(gè)10毫秒定時(shí)器
	}
	
	
	timeId=setInterval(divInterval,2000);//設(shè)置一個(gè)3秒的定時(shí)器。
	
	function stop(){
		clearInterval(timeId);
	}
	function start(){
		clearInterval(timeId);
		timeId=setInterval(divInterval,2000);
	}
	
	//頁(yè)面失去焦點(diǎn)停止
	onblur = function(){
		stop();
	}
	//頁(yè)面獲取焦點(diǎn)時(shí)開(kāi)始
	onfocus = function(){
		start();
	}
</script>
</head>
<body>
	<div id="box" onmouseover="stop()" onmouseout="start()">
		<div id="red" class="slide"></div>
		<div id="green" class="slide"></div>
		<div id="blue" class="slide"></div>
	</div>
</body>
</html>

以上就是關(guān)于“怎么在HTML5中實(shí)現(xiàn)簡(jiǎn)易輪播圖”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。

向AI問(wèn)一下細(xì)節(jié)

怎么在HTML5中實(shí)現(xiàn)簡(jiǎn)易輪播圖

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽