一文詳解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切片