一文詳解javascript輪播圖

么是輪播圖？

輪播圖，顧名思義就是輪流播放的圖片，常見領域比如電商網站，輪流播放熱賣商品?；蛘咴诰€教育平臺，輪流播放相關課程封面。

overflow屬性

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

將overflow設置為滾動：

overflow: scroll;

滾動條自動滾動

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

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

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

自增scrollTop，實現滾動條循環滾動：

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

輪播圖

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

<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>

視頻講解

相關推薦

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

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

事件循環是什么，為什么要理解它？

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

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

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

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

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

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

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

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

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

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

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

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

1.調用函數bar，bar返回setTimeout函數。

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

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

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

回調函數打印 Second。

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

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

吧，用swiper做輪播圖其實很簡單，特別是官網在使用說明上已經講得很清楚了。
但我還是在這里嘮叨幾下。
現有的js庫是很豐富的，其實我們常用到的組件都有了，輪播圖就是其中之一。
本文就講一下怎么用swiper做輪播圖，因為它是一個很出名的輪播圖組件。
更多文章請關注我的頭條號，我是落筆承冰。

一、百度一下“swiper”，進入它的中文官網。

swiper歷經了多個版本，我們就用最新的swiper4來說說吧。

二、調用swiper的方法有很多種，比如用npm安裝之類的，這里我們就用下載css和js庫文件來實現吧。

解壓后，里面有很多文件，找哪個呢？就是這兩個，一個是css，一個是js。

三、我們創建一個空白test.html文件來添加swiper。

引用剛才我們下載的那兩個文件。

四、開始做html部分。

接下來放入輪播的模塊了。

五、大家知道html只是一個外表，js才是內核，于是我們加入js部分。

輪播是可以用了，但是真的很很不成看，只有一個很小的范圍可以輪播。

六、我們試著改一下輪播圖的大小，并加個顏色。

我們用谷歌瀏覽器F12進入控制臺，模擬手機界面看一下效果。

七、果然是滿寬高只有一半，可怎么劃動，只能劃到第三塊，怎么樣才能讓三回到一，循環劃動呢，加個loop:true就可以了。

然后我們再改改樣式，讓里面的字變大居中，變白色，再把body的邊距去掉。

八、再加個功能，讓它自動播，我不動手，讓它每秒跑到下一下張圖。

九、我們再加個分頁器，分頁器是什么東西，就是輪播下方的一個個小圓點，一點就是一頁，這里我們應該有三個點。

十、小圓點是有了，也會隨圖滾動了，可是它不能點擊啊，那好，我們加入這個就可以了點了。

還真的可以點擊了。

十一、人家的輪播圖有左右按鈕可以控制圖片上一張下一張，我們也可以加。

在js里聲明相應的對象

十二、即然只是入門，那么到這里就可以了，更多的使用方法，大家可以去官網查一下，最后，我把圖片放進去，做出真正的輪播圖吧。

我搞了三張圖，三張圖寬高大小不一，直接放進去了，多少會讓某些圖片少一截或是只看見一部分，這個問題大家自己修改圖片或添加樣式來處理了，我就不再說了。

在線咨詢

上一篇：PHP 資源列表大全
下一篇：CSS 等分布局方式二

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商