JavaScript學習筆記：掌握了獲取元素和事件綁定，可以做輪播圖片

、什么是JavaScript中的window？

JavaScript中window是一個全局對象，代表瀏覽器中一個打開的窗口，每個窗口都是一個window對象。

2、什么是document？

document是window的一個屬性，這個屬性是一個對象；

document代表當前窗口中的整個網頁；

document對象保存了網頁上所有的內容，通過document對象就可以操作網頁上的內容。

3、什么是JavaScript中的DOM？

DOM定義了訪問和操作HTML文檔(網頁)的標準方法；

DOM全稱：Document Object Model，即文檔模型對象；

學習DOM就是學習如何通過document對象操作網頁上的內容。

4、JavaScript中如何通過選擇器獲取DOM元素？

querySelector：只會返回根據指定選擇器找到的第一個元素，例子：

let oDiv = document.querySelector("div");

console.log("oDiv"); //輸出：<div></div>

querySelectorAll：會返回指定選擇器找到的所有元素，例如：

let oDivs = document.querySelectorAll("div");

console.log("oDivs"); //輸出：NodeList由所有div元素組成的為數組。

5、JavaScript如何獲取和設置元素內容？

獲取元素內容：

1）innerHTML獲取的內容包含標簽，innerText/textContent獲取的內容不包含標簽；

2）innerHTML/textContent獲取的內容不會去除兩端的空格，innerText獲取的內容會去除兩端的空格。

設置元素內容：

共同點：無論通過innerHTML/innerText/textContent設置內容，新的內容都會覆蓋原有的內容；

區別：1）通過innerHTML設置數據，數據中包含標簽，會轉換成標簽之后再添加；

2）通過innerText/textContent設置數據，數據中包含標簽，不會轉換成標簽，會當做一個字符串直接設置。

6、什么是JavaScript中的事件？如何給元素綁定事件？

用戶和瀏覽器之間的交互行為被稱為事件，比如：鼠標的點擊/移入/移出。

在JavaScript中所有的HTML標簽都可以添加事件；

元素.事件名稱 = function(){}；

當對應事件被觸發時候就會自動執行function中的代碼。

掌握了以上JavaScript，就可以做某寶里面的輪播圖片了！

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

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

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

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

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

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

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

四、開始做html部分。

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

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

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

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

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

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

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

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

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

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

還真的可以點擊了。

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

在js里聲明相應的對象

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

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

么是輪播圖？

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

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學習筆記：掌握了獲取元素和事件綁定，可以做輪播圖片

么是輪播圖？

overflow屬性

滾動條自動滾動

輪播圖

視頻講解

相關推薦

您的項目需求