么是輪播圖？

輪播圖，顧名思義就是輪流播放的圖片，常見領域比如電商網站，輪流播放熱賣商品。或者在線教育平臺，輪流播放相關課程封面。

overflow屬性

比如，我們要實現(xiàn)一個相框功能，相框里面放入圖片，但是圖片大小不確定，可能會超出邊框，所以對于超出部分可以選擇隱藏處理或者加入滾動條。

將overflow設置為滾動：

overflow: scroll;

滾動條自動滾動

將滾動條拖動到頂部和底部，分別得到scrollTop屬性值：

let container=document.getElementById("container");

setInterval(function(){
	console.log(container.scrollTop);
}, 1000);

自增scrollTop，實現(xiàn)滾動條循環(huán)滾動：

setInterval(function(){
	// console.log(container.scrollTop);
	container.scrollTop +=1;
	if(container.scrollTop >=428)
		container.scrollTop=0;
}, 10);

輪播圖

要求：三張圖片循環(huán)向左移動。為防止出現(xiàn)圖像突然切換，一般把第一張圖片和最后一張圖片設置為同一張圖。

<div id="photosWrap">
	<div id="photo">
		<img src="images/image7.jpg">
		<img src="images/image8.jpg">
		<img src="images/image9.JPEG">
		<img src="images/image7.jpg">
	</div>
</div>

<style>
	#photosWrap {
		width: 350px;
		height: 300px;
		margin: 40px auto;
		box-shadow: 0 0 5px black;
		overflow: hidden;
		position: relative;
	}
	#photo {
		width: 9999px;
		height: 300px;
		position: absolute;
		left: 0;
	}
	#photosWrap img {
		width: 350px;
		height: 300px;
		float: left;
	}

 </style>

<script>
	let photo=document.getElementById("photo");
	let album_maxWidth=1050;
	let album_l=photo.offsetLeft;
	setInterval(function (){
		album_l -=2;
		if (album_l <=-album_maxWidth){
			album_l=0;
		}
		photo.style.left=album_l + "px";
	},30);

</script>

視頻講解

<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

相關推薦

• Javascript對象和選項卡實現(xiàn)
• Javascript簡介和基礎數(shù)據(jù)類型
• 一文詳解Javascript定時器
• Javascript點擊按鈕控制圖片切換
• Javascript在線刷題輸入輸出模板，學編程為什么要刷題？
• Javascript獲取className屬性和slice切片

者：Lydia Hallie
譯者：前端小智
來源：dev

事件循環(huán)是什么，為什么要理解它？

JS 是單線程的:一次只能運行一個任務。通常這沒什么大不了的，但現(xiàn)在想象一下我們正在運行一個需要30秒的任務。在這個任務中，我們要等待30秒，然后才能執(zhí)行接下來要做的事情(JS 默認運行在瀏覽器的主線程上，所以整個UI都卡住了)。

幸運的是，瀏覽器提供了 JS 引擎本身沒有提供的一些特性:Web API。這包括DOM API、setTimeout、HTTP請求等等。這些 API 可以幫助我們創(chuàng)建一些異步的、非阻塞的行為。

當我們調用一個函數(shù)時，它被添加到調用堆棧中。調用堆棧是JS引擎的一部分，這不是瀏覽器特有的。堆棧里面的順序是先進后出，當函數(shù)返回一個值時，它會從堆棧中彈出。

response函數(shù)返回一個setTimeout函數(shù)。setTimeout是由Web API提供的:它允許我們在不阻塞主線程的情況下延遲任務。我們傳遞給setTimeout函數(shù)的回調函數(shù)()=> {return 'Hey'}被添加到Web API中。與此同時，setTimeout函數(shù)和response函數(shù)從堆棧中彈出，它們都返回了它們的值。

在Web API中，計時器的運行時間與我們傳遞給它的第二個參數(shù)1000ms一樣長。回調不會立即添加到調用堆棧中，而是會傳遞到隊列中。

這可能是一個令人困惑的部分:它并不意味著在1000ms之后將回調函數(shù)添加到調用堆棧中，它只是在1000ms后添加到隊列中。在隊列，函數(shù)必須等待輪到它，才會執(zhí)行。

現(xiàn)在，我們一直在等待事件循環(huán)完成其惟一的任務:將隊列與調用堆棧連接起來。如果調用堆棧為空，那么如果之前調用的所有函數(shù)都返回了它們的值并已從堆棧中彈出，則隊列中的第一項將添加到調用堆棧中。在本例中，沒有調用其他函數(shù)，這意味著在回調函數(shù)成為隊列中的第一項時，調用堆棧為空。

回調函數(shù)被添加到調用堆棧中，被調用，并返回一個值，然后從堆棧中彈出。

通過動畫演示看起來是很有趣的，但還是需要重復多看幾遍，才能更好理解它們之間的關系。現(xiàn)在來考驗一下，如下代碼所示，請說出執(zhí)行的結果：

const?foo?=?()?=>?console.log("First");
const?bar?=?()?=>?setTimeout(()?=>?console.log("Second"),?500);
const?baz?=?()?=>?console.log("Third");

bar();
foo();
baz();

明白了嗎?讓我們快速查看一下在瀏覽器中運行這段代碼時發(fā)生了什么

1.調用函數(shù)bar，bar返回setTimeout函數(shù)。

2.我們傳遞給setTimeout的回調被添加到Web API，setTimeout函數(shù)和bar從調用棧中彈出。

3.計時器運行，同時函數(shù)foo被調用并打印 First。foo返回，接著調用函數(shù)baz，并將回調添加到隊列中。

4.函數(shù)baz打印Third，事件循環(huán)看到baz返回后，調用棧為空，然后將處理隊列中的回調添加到調用棧中。

5. 回調函數(shù)打印 Second。

希望本文對你在事件循環(huán)上的理解有一定的幫助，咱們下篇見。

原文：https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif