版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
HTML5+CSS3+JavaScript網(wǎng)頁(yè)設(shè)計(jì)與制作項(xiàng)目教程項(xiàng)目7JavaScript應(yīng)用——實(shí)現(xiàn)網(wǎng)頁(yè)交互功能目錄ENTERPRISEOPERATIONREPORT04.總結(jié)提升03.知識(shí)鏈接02.學(xué)習(xí)目標(biāo)01.項(xiàng)目導(dǎo)入05.擴(kuò)展訓(xùn)練項(xiàng)目導(dǎo)入PART01項(xiàng)目導(dǎo)入使用JavaScript制作“旅行家--圖片輪播”效果JavaScript是Web頁(yè)面中的一種腳本語言，常用來為網(wǎng)頁(yè)添加各式各樣的動(dòng)態(tài)功能，為用戶提供更流暢美觀的瀏覽效果。本章我們將使用JavaScript制作“旅行家——輪播圖”模塊，案例完成效果如圖7.1所示。學(xué)習(xí)目標(biāo)PART0202知識(shí)目標(biāo)能力目標(biāo)1、理解JavaScript的基本概念及在網(wǎng)頁(yè)中的主要作用2、掌握J(rèn)avaScript的引入方法及基本語法3、理解并掌握J(rèn)avaScript對(duì)象的使用方法4、掌握J(rèn)avaScript的事件處理方法1、會(huì)用JavaScript實(shí)現(xiàn)簡(jiǎn)單的網(wǎng)頁(yè)交互功能2、會(huì)用JavaScript實(shí)現(xiàn)圖片輪播效果02知識(shí)鏈接PART0303一、JavaScript簡(jiǎn)介1、什么是JavaScriptJavaScript是一種逐行執(zhí)行的腳本語言，常用來為網(wǎng)頁(yè)添加各式各樣的動(dòng)態(tài)功能，為用戶提供更流暢美觀的瀏覽效果。除了JavaScript，網(wǎng)頁(yè)相關(guān)前端技術(shù)還包括Ajax（實(shí)現(xiàn)瀏覽器與服務(wù)器異步交互）及Node.js（在服務(wù)器端使用的JavaScript代碼）等。JavaScript在網(wǎng)頁(yè)中的用處很多，它可以對(duì)事件做出響應(yīng)，可以將JavaScript設(shè)置為當(dāng)某事件發(fā)生時(shí)才被執(zhí)行。例如：03一、JavaScript簡(jiǎn)介（1）頁(yè)面載入完成或者用戶單擊某個(gè)HTML元素時(shí)發(fā)生相應(yīng)的動(dòng)作，如圖7.2所示的“TAB欄切換”，當(dāng)用戶將鼠標(biāo)分別移上“生活”、“VR”、“河南”等時(shí)，對(duì)應(yīng)的內(nèi)容將會(huì)切換。03一、JavaScript簡(jiǎn)介（2）JavaScript可以讀寫HTML元素，在數(shù)據(jù)被提交到服務(wù)器之前，JavaScript還可被用來驗(yàn)證這些數(shù)據(jù)，如7.3所示的注冊(cè)頁(yè)面。03一、JavaScript簡(jiǎn)介（3）JavaScript可被用來檢測(cè)訪問者的瀏覽器，并根據(jù)所檢測(cè)到的瀏覽器，為這個(gè)瀏覽器載入相應(yīng)的頁(yè)面。（4）JavaScript可被用來創(chuàng)建cookies，還可被用來存儲(chǔ)和取回位于訪問者計(jì)算機(jī)中的信息等。032、JavaScript的特點(diǎn)JavaScript是一種描述性語言，也是一種基于對(duì)象（Object）和事件驅(qū)動(dòng)（EventDriven）的，并具有安全性的腳本語言。最初由網(wǎng)景（現(xiàn)在的Mozilla）公司創(chuàng)建。主要有以下特點(diǎn)：解釋性：JavaScript是一種解釋性語言。由瀏覽器解釋并執(zhí)行代碼，不進(jìn)行預(yù)編譯。基于對(duì)象：JavaScript是一種基于對(duì)象的腳本語言,它不僅可以創(chuàng)建對(duì)象,也能使用現(xiàn)有的對(duì)象，語法和Java類似。動(dòng)態(tài)性：JavaScript一般用來編寫客戶端的腳本，它不需要經(jīng)過Web服務(wù)器就可以對(duì)用戶的輸入做出響應(yīng)。在訪問一個(gè)網(wǎng)頁(yè)時(shí),鼠標(biāo)在網(wǎng)頁(yè)中進(jìn)行鼠標(biāo)點(diǎn)擊或上下移、窗口移動(dòng)等操作JavaScript都可直接對(duì)這些事件給出相應(yīng)的響應(yīng)?？缙脚_(tái)性：JavaScript腳本語言不依賴于操作系統(tǒng)，在絕大多數(shù)瀏覽器的支持下，可以在多種平臺(tái)下運(yùn)行（如Windows、Linux、Mac、Android、iOS等）。一、JavaScript簡(jiǎn)介033、JavaScript的組成JavaScript主要有三大組成部分，說明如下。(1)ECMAScript：JavaScript的核心，描述了語言的基本語法(var、for、if、array等)和數(shù)據(jù)類型(數(shù)字、字符串、布爾、函數(shù)、對(duì)象(obj、[]、{}、null)、未定義)。(2)瀏覽器對(duì)象模型（BOM）對(duì)瀏覽器窗口進(jìn)行訪問和操作。例如彈出新的瀏覽器窗口，移動(dòng)、改變和關(guān)閉瀏覽器窗口，提供詳細(xì)的網(wǎng)絡(luò)瀏覽器信息（navigatorobject），詳細(xì)的頁(yè)面信息（locationobject），詳細(xì)的用戶屏幕分辨率的信息（screenobject），對(duì)cookies的支持等等。BOM作為JavaScript的一部分并沒有相關(guān)標(biāo)準(zhǔn)的支持，每一個(gè)瀏覽器都有自己的實(shí)現(xiàn)，雖然有一些非事實(shí)的標(biāo)準(zhǔn)，但還是給開發(fā)者帶來一定的麻煩。一、JavaScript簡(jiǎn)介03(3)文檔對(duì)象模型（DOM）：DOM（文檔對(duì)象模型）是HTML和XML的應(yīng)用程序接口（API）。DOM將把整個(gè)頁(yè)面規(guī)劃成由節(jié)點(diǎn)層級(jí)構(gòu)成的文檔。HTML或XML頁(yè)面的每個(gè)部分都是一個(gè)節(jié)點(diǎn)的衍生物。如下面的HTML頁(yè)面：一、JavaScript簡(jiǎn)介<html><head><title>SamplePage</title></head><body><p>helloworld!</p></body></html>03DOM通過創(chuàng)建樹來表示文檔，從而使開發(fā)者對(duì)文檔的內(nèi)容和結(jié)構(gòu)具有空前的控制力。用DOMAPI可以輕松地刪除、添加和替換節(jié)點(diǎn)（getElementById、childNodes、appendChild、innerHTML）。
上段代碼可以用DOM繪制如圖7.4所示的節(jié)點(diǎn)層次圖。一、JavaScript簡(jiǎn)介034、JavaScript執(zhí)行原理（1）瀏覽器客戶端向服務(wù)器端發(fā)送請(qǐng)求。(即用戶在瀏覽器地址欄中輸入地址)（2）數(shù)據(jù)處理：服務(wù)器端將某個(gè)包含JavaScript的頁(yè)面進(jìn)行處理。（3）發(fā)送響應(yīng)：服務(wù)器端將含有JavaScript的HTML文件進(jìn)行處理頁(yè)面發(fā)送到瀏覽器客戶端，然后由瀏覽器客戶端從上直下逐條解析HTML標(biāo)簽和JavaScript標(biāo)簽，將頁(yè)面效果呈給用戶。一、JavaScript簡(jiǎn)介03二、JavaScript基本語法1、JavaScript引入方式通常JavaScript腳本是通過嵌入在HTML中來實(shí)現(xiàn)自身的功能的。在HTML文檔中引入JavaScript有三種方式，具體如下：（1）嵌入式：將代碼直接寫在HTML文檔中。通過<script>標(biāo)簽及其相關(guān)屬性可以引入JavaScript代碼。當(dāng)瀏覽器讀取到<script>標(biāo)簽時(shí)，就解釋執(zhí)行其中的腳本。具體語法如下：
//
HTML5中默認(rèn)腳本類型為JavaScript，編寫時(shí)可省略type屬性<scripttype="text/javascript"> //JavaScript代碼</script>03二、JavaScript基本語法（2）外鏈?zhǔn)剑簞?chuàng)建.js文件，使用src屬性引入文件。當(dāng)腳本代碼比較復(fù)雜或者同一段代碼需要被多個(gè)網(wǎng)頁(yè)文件使用時(shí)，可以將這些腳本代碼放置在一個(gè)擴(kuò)展名為.js的文件中，然后通過外鏈?zhǔn)揭朐搄s文件。具體語法如下：<scriptsrc="js文件路徑"></script>注意：使用嵌入式或外鏈?zhǔn)綍r(shí)，JavaScript代碼可以放在HTML文檔的head標(biāo)簽內(nèi)，也可放在body標(biāo)簽中，元素標(biāo)簽后。JavaScript代碼放在不同的位置會(huì)影響程序的運(yùn)行順序。（3）行內(nèi)式：使用html標(biāo)記中href屬性或通過事件引入//通過href屬性引入<ahref="響應(yīng)函數(shù);"></a>//通過事件引入<inputtype="button"onclick="響應(yīng)函數(shù);"/>03【例7-1】引入JavaScript代碼步驟一：定義HTML文檔<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>引入JavaScript</title><!--使用外鏈?zhǔn)揭?-><scripttype="text/javascript"src="7-1.js"></script></head><body><!--使用行內(nèi)式引入--><!--點(diǎn)擊按鈕，調(diào)用hello()函數(shù)--><buttononclick="hello()">歡迎</button><br><!--使用內(nèi)嵌式引入--><scripttype="text/javascript">//使用document.write()方法，在頁(yè)面中輸出文字document.write("JavaScript學(xué)習(xí)第一課");</script></body></html>步驟二：定義js文檔function
hello(){
alert("歡迎學(xué)習(xí)JavaScript！");
}
運(yùn)行例7-1，得到如圖7.5所示效果。點(diǎn)擊歡迎按鈕，調(diào)用js文件中定義的響應(yīng)函數(shù)hello(),彈出警示框，如圖7.6所示。03二、JavaScript基本語法2、JavaScript基本語法（1）常用輸出語句JavaScript常用輸出語句如下所示：window.alert()：寫入警示框document.write()：寫入HTML輸出console.log()：寫入瀏覽器控制臺(tái)（2）注釋JavaScript注釋語句語法格式如下所示：//單行注釋/*多行注釋*/03二、JavaScript基本語法（3）數(shù)據(jù)類型JavaScript的數(shù)據(jù)類型，根據(jù)存儲(chǔ)方式不同可分為值類型和引用類型：值類型：值類型數(shù)據(jù)直接存儲(chǔ)在堆中，變量存儲(chǔ)的是簡(jiǎn)單的數(shù)據(jù)段，存儲(chǔ)的是具體的值，是輕量級(jí)的數(shù)據(jù)存儲(chǔ)方式。包括整型、浮點(diǎn)型、布爾型等。引用類型：引用類型的變量，存儲(chǔ)的是對(duì)象引用地址。將數(shù)據(jù)的存儲(chǔ)位置存儲(chǔ)在堆中，講具體數(shù)據(jù)存儲(chǔ)在棧中。包括數(shù)組、對(duì)象等。03二、JavaScript基本語法（4）變量與常量的聲明
在JavaScript中聲明變量和常量，主要是用一下語句：var：聲明變量let：聲明僅在塊級(jí)作用范圍內(nèi)有效的變量，如if循環(huán)中的迭代條件。const：聲明常量（5）運(yùn)算符JavaScript中常用的運(yùn)算符如表所示：數(shù)學(xué)運(yùn)算符：+、-、*、/、%、++、--連接運(yùn)算符：+字符串：使用單引號(hào)’’或雙引號(hào)""比較運(yùn)算符：>、<、==、>=、<=、!==、===（絕對(duì)等于：值和類型均相等：）03二、JavaScript基本語法（6）流程控制語句在JavaScript中，程序流程控制可分為順序結(jié)構(gòu)、分支結(jié)構(gòu)及循環(huán)結(jié)構(gòu)：順序結(jié)構(gòu)：標(biāo)準(zhǔn)的從上往下執(zhí)行的順序。
分支結(jié)構(gòu)：分支結(jié)構(gòu)也稱選擇結(jié)構(gòu)，通過對(duì)給定的條件進(jìn)行判斷，從而決定執(zhí)行兩個(gè)或多個(gè)分支中的哪一支。主要包括：if語句、switch語句。循環(huán)結(jié)構(gòu)：根據(jù)判斷條件的結(jié)果選擇是否重復(fù)執(zhí)行某段代碼的結(jié)構(gòu)。主要包括：for語句、while語句。
在流程控制語句中，我們還經(jīng)常break語句及continue語句，用來實(shí)現(xiàn)程序跳轉(zhuǎn)。其中break語句表示跳出當(dāng)前分支或循環(huán)；continue表示跳出當(dāng)次分支或循環(huán)，進(jìn)入下一次循環(huán)。03二、JavaScript基本語法（7）函數(shù)函數(shù)用于封裝一段完成特定功能的代碼。用戶在使用時(shí)只需關(guān)注參數(shù)及返回值，就能完成特定功能。JavaScript中定義函數(shù)的語法格式如下：
function函數(shù)名（形參1，形參2，……）{
函數(shù)體；
return返回值；}其中：形參：定義函數(shù)時(shí)使用的參數(shù)實(shí)參：調(diào)用函數(shù)式傳入的參數(shù)返回值：函數(shù)的返回值，不定義時(shí)返回值為undefined03【例】7-2數(shù)組嵌套實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>省份城市的三級(jí)聯(lián)動(dòng)</title></head><body><form><selectid="province"><optionvalue="-1">請(qǐng)選擇</option></select><selectid="city"></select><selectid="country"></select></form><script>//省份數(shù)組varprovinceArr=['上海市','江蘇省','河南省'];//城市數(shù)組varcityArr=[['上海市'],['蘇州市','南京市','揚(yáng)州市'],['鄭州市','洛陽(yáng)市','新鄉(xiāng)市','南陽(yáng)市']];//區(qū)域數(shù)組varcountryArr=[[['徐匯區(qū)','浦東區(qū)','靜安區(qū)','黃浦區(qū)','長(zhǎng)寧區(qū)']],[['虎丘區(qū)','吳中區(qū)','相城區(qū)','姑蘇區(qū)','吳江區(qū)'],['玄武區(qū)','秦淮區(qū)','鼓樓區(qū)','浦口區(qū)'],['廣陵區(qū)','江都區(qū)']],[['二七區(qū)','金水區(qū)','中原區(qū)','鄭東新區(qū)','管城區(qū)','中牟市','新鄭市',],['澗西區(qū)','老城區(qū)','西工區(qū)'],['衛(wèi)濱區(qū)','紅旗區(qū)','鳳泉區(qū)'],['宛城區(qū)','臥龍區(qū)']]];//第1步functioncreateOption(obj,data){for(variindata){varop=newOption(data[i],i);//創(chuàng)建下拉列表中的option選項(xiàng)obj.options.add(op);//將選項(xiàng)添加到下拉列表中}}varprovince=document.getElementById('province');createOption(province,provinceArr);03//第2步varcity=document.getElementById('city');province.onchange=function(){city.options.length=0;//清空city下的原有<option>createOption(city,cityArr[province.value]);if(province.value>=0){city.onchange();//自動(dòng)添加
城市對(duì)應(yīng)區(qū)域
下拉列表
}else{country.options.length=0;//清空country下的原有<option>}};//第3步varcountry=document.getElementById('country');city.onchange=function(){country.options.length=0;//清空country下的所有原有<option>createOption(country,countryArr[province.value][city.value]);};</script></body></html>03二、JavaScript基本語法（8）JavaScript對(duì)象JavaScript是基于對(duì)象的腳本語言，在JavaScript中，所有類都是基類Object類的子類。定義和使用類的基本語法如下：//
定義類function
類名(參數(shù))
{
//
初始化類的屬性
this.屬性名
=
屬性值;
……
//
初始化類的方法
function
方法名(參數(shù))
{
//
方法體
}}
//
類的實(shí)例化var
對(duì)象名
=
new
類名(參數(shù));//
獲取類的屬性對(duì)象名.屬性名//
調(diào)用類的方法對(duì)象名.方法名(參數(shù))JavaScript中提供了大量的內(nèi)置對(duì)象供用戶使用，具體如下：Array：數(shù)組類Date：日期類Error：錯(cuò)誤類Function：函數(shù)類Math：數(shù)學(xué)類，該對(duì)象包含相當(dāng)多的執(zhí)行數(shù)學(xué)運(yùn)算的方法Number：數(shù)值類Object：對(duì)象類String：字符串類03【例7-3】使用日期類
<!DOCTYPE
html><html><head>
<meta
charset="utf-8">
<title>獲取當(dāng)前時(shí)間</title></head><body>
<script
type="text/javascript">
var
today
=
new
Date();
document.write("現(xiàn)在是："
+
today.getFullYear()
+
"年"
+
(today.getMonth()
+
1)
+
"月"
+
today.getDate()
+
"日<br/>");
document.write("本地時(shí)間格式："
+
today.toLocaleString()
+
"<br/>");
document.write("格林尼治標(biāo)準(zhǔn)時(shí)間："
+
today.toGMTString()
+
"<br/>");
</script></body>03三、DOM對(duì)象DOM（DocumentObjectModel，文檔對(duì)象模型）用于完成HTML和XML文檔的操作，對(duì)所有元素進(jìn)行獲取、訪問、標(biāo)簽屬性和樣式的設(shè)置。在JavaScript中利用DOM操作HTML元素和CSS樣式。1、DOM節(jié)點(diǎn)樹DOM節(jié)點(diǎn)樹主要包括以下元素：DOMHTML：DOM中為操作HTML文檔提供的屬性和方法element：HTML中的標(biāo)簽元素node：節(jié)點(diǎn)，文檔中所有內(nèi)容。節(jié)點(diǎn)分為標(biāo)簽節(jié)點(diǎn)、文本節(jié)點(diǎn)、屬性節(jié)點(diǎn)，其中標(biāo)簽節(jié)點(diǎn)又被稱為元素節(jié)點(diǎn)，文檔中的注釋稱為注釋節(jié)點(diǎn)。03三、DOM對(duì)象DOM將網(wǎng)頁(yè)中文檔的對(duì)象關(guān)系規(guī)劃為節(jié)點(diǎn)層級(jí)，構(gòu)成它們之間的等級(jí)關(guān)系，這種各對(duì)象間的層次結(jié)構(gòu)被稱為節(jié)點(diǎn)樹。如圖7.9所示就是一個(gè)DOM樹。圖7.9文檔與對(duì)應(yīng)的層次結(jié)構(gòu)圖03三、DOM對(duì)象一個(gè)文檔的樹形結(jié)構(gòu)就是由各種不同的節(jié)點(diǎn)組成的。文檔對(duì)象節(jié)點(diǎn)樹有以下特點(diǎn)：每個(gè)節(jié)點(diǎn)樹有一個(gè)根節(jié)點(diǎn)。除了根節(jié)點(diǎn)，每個(gè)節(jié)點(diǎn)都有一個(gè)父節(jié)點(diǎn)。每個(gè)節(jié)點(diǎn)都可以有許多的子節(jié)點(diǎn)。具有相同父節(jié)點(diǎn)的節(jié)點(diǎn)叫做“兄弟節(jié)點(diǎn)”。通過對(duì)象模型，JavaScript可以對(duì)節(jié)點(diǎn)元素實(shí)現(xiàn)如下操作：改變頁(yè)面中的所有HTML元素內(nèi)容改變頁(yè)面中的所有HTML屬性改變頁(yè)面中的所有CSS樣式刪除已有的HTML元素和屬性添加新的HTML元素和屬性對(duì)頁(yè)面中所有已有的HTML事件作出反應(yīng)在頁(yè)面中創(chuàng)建新的HTML事件03三、DOM對(duì)象2、節(jié)點(diǎn)的訪問（1）訪問指定元素一個(gè)元素對(duì)象可以擁有元素節(jié)點(diǎn)、文本節(jié)點(diǎn)、子節(jié)點(diǎn)或其它類型的節(jié)點(diǎn)。訪問指定節(jié)點(diǎn)的常用方法如表7.1所示。表7.1訪問節(jié)點(diǎn)的方法方法說明getElementById(id)獲取擁有指定id的第一個(gè)元素對(duì)象的引用getElementsByName(name)獲取帶有指定名稱的元素對(duì)象集合getElementsByTagName(name)獲取帶有指定標(biāo)簽名的元素對(duì)象集合getElementsByClassName(name)獲取指定類名的元素對(duì)象集合03三、DOM對(duì)象（2）訪問相關(guān)元素引用完成一個(gè)頁(yè)面元素對(duì)象后，可以使用DOM節(jié)點(diǎn)對(duì)象的parentNode、childNodes、firstChild、lastChild、previousSibling或nextSibling屬性訪問相對(duì)于該頁(yè)面元素的父、子或兄弟元素。具體如表7.11所示。表7.2訪問節(jié)點(diǎn)的方法屬性說明parentNode元素節(jié)點(diǎn)的父節(jié)點(diǎn)childNodes元素節(jié)點(diǎn)的子節(jié)點(diǎn)數(shù)組firstChild第一個(gè)子節(jié)點(diǎn)lastChild最后一個(gè)子節(jié)點(diǎn)previousSibling前一個(gè)兄弟節(jié)點(diǎn)nextSibling后一個(gè)兄弟節(jié)點(diǎn)03三、DOM對(duì)象3、元素對(duì)象常用操作由于HTMLDOM將HTML文檔表示為一顆DOM樹，每個(gè)節(jié)點(diǎn)對(duì)象表示文檔的特定部分，因此通過修改這些對(duì)象，就可以動(dòng)態(tài)改變頁(yè)面元素的屬性。關(guān)于元素對(duì)象的常用操作如表7.3所示。document.createElement()是在對(duì)象中創(chuàng)建一個(gè)對(duì)象，要與appendChild()或insertBefore()方法聯(lián)合使用。其中，appendChild()方法在節(jié)點(diǎn)的子節(jié)點(diǎn)列表末添加新的子節(jié)點(diǎn)。insertBefore()方法在節(jié)點(diǎn)的子節(jié)點(diǎn)列表任意位置插入新的節(jié)點(diǎn)。表7.3修改頁(yè)面元素的方法方法說明createElement()創(chuàng)建元素節(jié)點(diǎn)createTextNode()創(chuàng)建文本節(jié)點(diǎn)appendChild()為當(dāng)前節(jié)點(diǎn)增加一個(gè)子節(jié)點(diǎn)（作為最后一個(gè)子節(jié)點(diǎn)）insertBefore()為當(dāng)前節(jié)點(diǎn)增加一個(gè)子節(jié)點(diǎn)（插入到指定子節(jié)點(diǎn)之前）removeChild()刪除當(dāng)前節(jié)點(diǎn)的某個(gè)子節(jié)點(diǎn)03三、DOM對(duì)象4、元素屬性與內(nèi)容操作除了可以對(duì)元素進(jìn)行添加刪除等操作，還可以對(duì)元素的屬性和內(nèi)容進(jìn)行修改，具體方法如表7.4所示。表7.4元素屬性及屬性操作類型屬性/方法說明元素內(nèi)容innerHTML獲取或設(shè)置元素的HTML內(nèi)容樣式屬性className獲取或設(shè)置元素的class屬性style獲取或設(shè)置元素的style樣式屬性位置屬性offsetWidth、offsetHeight獲取或設(shè)置元素的寬和高（不含滾動(dòng)條）scrollWidth、scrollHeight獲取或設(shè)置元素的完整的寬和高（含滾動(dòng)條）offsetTop、offsetLeft獲取或設(shè)置包含滾動(dòng)條，距離上或左邊滾動(dòng)過的距離scrollTop、scrollLeft獲取或設(shè)置元素在網(wǎng)頁(yè)中的坐標(biāo)屬性操作getAttribute()獲得元素指定屬性的值setAttribute()為元素設(shè)置新的屬性removeAttribute()為元素刪除指定的屬性03三、DOM對(duì)象5、元素樣式操作style屬性可以修改元素的樣式，className屬性可以修改元素的類名。（1）style屬性每個(gè)元素對(duì)象都有一個(gè)style屬性，常用style屬性如表7.5所示。使用這個(gè)屬性可以動(dòng)態(tài)調(diào)整元素的內(nèi)嵌樣式，從而獲得所需要的效果。名稱說明background設(shè)置或返回元素的背景屬性backgroundColor設(shè)置或返回元素的背景色display設(shè)置或返回元素的顯示類型height設(shè)置或返回元素的高度left設(shè)置或返回定位元素的左部位置listStyleType設(shè)置或返回列表項(xiàng)標(biāo)記的類型overflow設(shè)置或返回如何處理呈現(xiàn)在元素框外面的內(nèi)容textAlign設(shè)置或返回文本的水平對(duì)齊方式textDecoration設(shè)置或返回文本的修飾textIndent設(shè)置或返回文本第一行的縮進(jìn)transform向元素應(yīng)用2D或3D轉(zhuǎn)換03（2）className屬性元素對(duì)象的className屬性用于切換元素的類名，或?yàn)樵刈芳宇惷?。例?-4】操作DOM節(jié)點(diǎn)<!DOCTYPE
html><html><head>
<meta
charset="utf-8">
<title>添加節(jié)點(diǎn)</title></head><body>
<div
id="father"
style="height:
200px;width:
400px;">
<p
id="p1">node1</p>
<p
id="p2">node2</p>
<button
id='append'
onclick="addnode()">添加節(jié)點(diǎn)</button>
</div></body><script
type="text/javascript">
function
addnode()
{
var
child
=
document.createElement('p');
var
father
=
document.getElementById('father');
child.innerHTML
=
"This
is
a
test";
child.style.color
=
"red"
father.appendChild(child);
}</script></html>案例完成后，打開頁(yè)面，點(diǎn)擊“添加節(jié)點(diǎn)”按鈕，就會(huì)在按鈕下方添加段落節(jié)點(diǎn)，如圖7.9所示：03四、BOM對(duì)象BOM（BrowserObjectModel）是瀏覽器對(duì)象模型，它提供了一系列對(duì)象用于與瀏覽器窗口進(jìn)行交互。BOM對(duì)象包括window（窗口）、navigator（瀏覽器程序）、screen（屏幕）、location（地址）、history（歷史）和document（文檔）等對(duì)象。其中，window對(duì)象是瀏覽器的窗口，它是整個(gè)BOM的核心，位于BOM對(duì)象的最頂層。關(guān)于BOM對(duì)象的層次結(jié)構(gòu)如圖7.10所示。圖7.10BOM對(duì)象的層次結(jié)構(gòu)圖03四、BOM對(duì)象window子對(duì)象包括：document（文檔對(duì)象）：DOM對(duì)象，是HTML頁(yè)面當(dāng)前窗體的內(nèi)容。frame（框架對(duì)象）：包含了框架的版面布局信息，以及每一個(gè)框架所對(duì)應(yīng)的窗口對(duì)象。history（歷史對(duì)象）：主要用于記錄瀏覽器的訪問歷史記錄，也就是瀏覽網(wǎng)頁(yè)的前進(jìn)與后退功能。location（地址欄對(duì)象）：用于獲取當(dāng)前瀏覽器中URL地址欄內(nèi)的相關(guān)數(shù)據(jù)。navigator（瀏覽器對(duì)象）：用于獲取瀏覽器的相關(guān)數(shù)據(jù)，如瀏覽器的名稱、版本，也稱為瀏覽器的嗅探器。screen（屏幕對(duì)象）：可獲取與屏幕相關(guān)的數(shù)據(jù)，例如屏幕的分辨率等。031、window對(duì)象window對(duì)象表示整個(gè)瀏覽器窗口，用于獲取瀏覽器窗口的大小、位置，或設(shè)置定時(shí)器等。window對(duì)象常用的屬性和方法如表7.6所示。表7.6window對(duì)象常用的屬性和方法屬性/方法說明Document、history、location、navigator、screen返回相應(yīng)對(duì)象的引用。例如document屬性返回document對(duì)象的引用。parent、self、top分別返回父窗口、當(dāng)前窗口和最頂層窗口的對(duì)象引用。screenLeft、screenTop、screenX、screenY返回窗口的左上角、在屏幕上的X、Y坐標(biāo)。Firefox不支持screenLeft、screenTop，IE8及更早的IE版本不支持screenX、screenY。innerWidth、innerHeight分別返回窗口文檔顯示區(qū)域的寬度和高度。outerWidth、outerHeight分別返回窗口的外部寬度和高度。closed返回當(dāng)前窗口是否已被關(guān)閉的布爾值。opener返回對(duì)創(chuàng)建此窗口的窗口引用。open()、close()打開或關(guān)閉瀏覽器窗口。alert()、confirm()、prompt()分別表示彈出警告框、確認(rèn)框、用戶輸入框。moveBy()、moveTo()以窗口左上角為基準(zhǔn)移動(dòng)窗口，moveBy()是按偏移量移動(dòng)，moveTo()是移動(dòng)到指定的屏幕坐標(biāo)。scrollBy()、scrollTo()scrollBy()是按偏移量滾動(dòng)內(nèi)容，scrollTo()是滾動(dòng)到指定的坐標(biāo)。setTimeout()、clearTimeout()設(shè)置或清除普通定時(shí)器。setInterval()、clearInterval()設(shè)置或清除周期定時(shí)器。注意：window對(duì)象是最頂層對(duì)象，調(diào)用他的屬性和方法時(shí)，可以省去window，例如使用alert()彈出一個(gè)警告提示框，完整的寫法應(yīng)該是window.alert()，即調(diào)用window對(duì)象的alert()方法。03四、BOM對(duì)象2、document對(duì)象document對(duì)象用于處理網(wǎng)頁(yè)文檔，通過該對(duì)象可以訪問文檔中所有的元素。下面列舉document對(duì)象常用的屬性和方法，如表7.7所示。表7.7document對(duì)象常用的屬性和方法屬性/方法說明body訪問<body>元素。lastModified獲得文檔最后修改的日期和時(shí)間。referrer獲得該文檔的來路URL地址，當(dāng)文檔通過超鏈接被訪問時(shí)有效。title獲得當(dāng)前文檔的標(biāo)題。write()向文檔寫HTML或JavaScript代碼。03四、BOM對(duì)象3、location對(duì)象location對(duì)象用于獲取和設(shè)置當(dāng)前網(wǎng)頁(yè)的URL地址，其常用的屬性和方法如表7.8所示。表7.8location對(duì)象常用的屬性和方法屬性/方法說明hash獲取或設(shè)置URL中的錨點(diǎn)，例如“#top”。host獲取或設(shè)置URL中的主機(jī)名，例如“”。port獲取或設(shè)置URL中的端口號(hào)，例如“80”。href獲取或設(shè)置整個(gè)URL，例如“/1.html”。pathname獲取或設(shè)置URL的路徑部分，例如“/1.html”。protocol獲取或設(shè)置URL的協(xié)議，例如“http:”。search獲取或設(shè)置URL地址中的GET請(qǐng)求部分，例如“?name=haha&age=20”。reload()重新加載當(dāng)前文檔。03四、BOM對(duì)象4、history對(duì)象history對(duì)象最初的設(shè)計(jì)和瀏覽器的歷史記錄有關(guān)，但出于隱私方面的考慮，該對(duì)象不再允許獲取到用戶訪問過的URL歷史。history對(duì)象主要的作用是控制瀏覽器的前進(jìn)和后退，其常用方法如表7.18所示。表7.18history對(duì)象常用的屬性和方法屬性/方法說明back()加載歷史記錄中的前一個(gè)URL（相當(dāng)于后退）。forward()加載歷史記錄中的后一個(gè)URL（相當(dāng)于前進(jìn)）。go()加載歷史記錄中的某個(gè)頁(yè)面。03四、BOM對(duì)象5、screen對(duì)象screen對(duì)象用于獲取用戶計(jì)算機(jī)的屏幕信息，例如屏幕分辨率、顏色位數(shù)等。screen對(duì)象的常用屬性如表7.9所示。表7.9screen對(duì)象常用的屬性和方法屬性說明width、height屏幕的寬度和高度availWidth、availHeight屏幕的可用寬度和可用高度（不包括Windows任務(wù)欄）colorDepth屏幕的顏色位數(shù)03【例7-5】定時(shí)跳轉(zhuǎn)頁(yè)面
<!DOCTYPE
html><html
lang="en">
<head>
<meta
charset="UTF-8">
<meta
http-equiv="X-UA-Compatible"
content="IE=edge">
<meta
name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>定時(shí)跳轉(zhuǎn)頁(yè)面</title></head>
<body>
<p
style="text-align:
center;">
<span
id="time"
style="color:
red;">5</span>秒之后，自動(dòng)跳轉(zhuǎn)百度首頁(yè)
</p>
<script>
var
second
=
5;
function
showtime()
{
second--;
//
判斷時(shí)間，如果second<=0，則跳轉(zhuǎn)
if
(second
<=
0)
{
location.href
=
"";
}
var
time
=
document.getElementById("time");
time.innerHTML
=
second
+
"";
}
//
設(shè)置定時(shí)器
setInterval(showtime,
1000);
</script></body>
</html>項(xiàng)目完成效果如圖所示，頁(yè)面中倒計(jì)時(shí)5秒后自動(dòng)跳轉(zhuǎn)到百度首頁(yè)03五、事件事件是交互的橋梁，用戶可以通過多種方式與瀏覽器載入的頁(yè)面進(jìn)行交互。Web應(yīng)用程序開發(fā)者通過JavaScript腳本內(nèi)置的和自定義的事件來響應(yīng)用戶的動(dòng)作，就可以開發(fā)出更有交互性、動(dòng)態(tài)性的頁(yè)面。最常見的JavaScript事件有：鼠標(biāo)交互事件鍵盤事件表單事件03五、事件1、JavaScript事件與事件處理采用事件驅(qū)動(dòng)是JavaScript語言的一個(gè)最基本特征，所謂的事件是指用戶在訪問頁(yè)面時(shí)執(zhí)行的操作。事件處理指的就是與事件關(guān)聯(lián)的JavaScript對(duì)象，當(dāng)與頁(yè)面特定部分關(guān)聯(lián)的事件發(fā)生時(shí)，事件處理器就會(huì)被調(diào)用。事件處理的過程通常分為三步，具體如下：發(fā)生事件啟動(dòng)事件處理程序事件處理程序作出反應(yīng)03五、事件在使用事件處理程序?qū)?yè)面進(jìn)行操作時(shí)，關(guān)鍵在于如何通過對(duì)象的事件來調(diào)用事件處理程序。在JavaScript中，調(diào)用事件處理程序的方法有兩種，具體如下：在JavaScript中調(diào)用事件處理程序在JavaScript中調(diào)用事件處理程序，首先需要獲得處理對(duì)象的引用，然后將要執(zhí)行的處理函數(shù)賦值給對(duì)應(yīng)的事件。在HTML中調(diào)用事件處理程序只需要在HTML標(biāo)記中添加相應(yīng)的事件，并在其中執(zhí)行要執(zhí)行的代碼或函數(shù)名即可。2、事件對(duì)象在JavaScript中，當(dāng)發(fā)生事件時(shí)，都會(huì)產(chǎn)生一個(gè)事件對(duì)象event。這個(gè)對(duì)象包括所有與事件相關(guān)的信息，包括DOM元素、事件類型及特定時(shí)間相關(guān)的信息。03五、事件3、事件分類
根據(jù)監(jiān)聽的對(duì)象不同，常見的事件可以分為頁(yè)面事件、鼠標(biāo)事件、表單事件、鍵盤事件等，具體如下：（1）頁(yè)面事件頁(yè)面事件是指通過頁(yè)面觸發(fā)的事件，常用的頁(yè)面事件如表7.10所示。表7.10頁(yè)面事件類別事件事件說明頁(yè)面事件onload
當(dāng)頁(yè)面加載完成時(shí)觸發(fā)此事件onunload
當(dāng)頁(yè)面卸載時(shí)觸發(fā)此事件03五、事件（2）鼠標(biāo)事件鼠標(biāo)事件是指通過鼠標(biāo)動(dòng)作觸發(fā)的事件，鼠標(biāo)事件有很多，下面列舉幾個(gè)常用的鼠標(biāo)事件，如表7.11所示。表7.11鼠標(biāo)事件類別事件事件說明鼠標(biāo)事件onclick
鼠標(biāo)單擊時(shí)觸發(fā)此事件ondblclick
鼠標(biāo)雙擊時(shí)觸發(fā)此事件onmousedown
鼠標(biāo)按下時(shí)觸發(fā)此事件onmouseup
鼠標(biāo)彈起時(shí)觸發(fā)的事件onmouseover
鼠標(biāo)移動(dòng)到某個(gè)設(shè)置了此事件的元素上時(shí)觸發(fā)此事件onmousemove
鼠標(biāo)移動(dòng)時(shí)觸發(fā)此事件onmouseout
鼠標(biāo)從某個(gè)設(shè)置了此事件的元素上離開時(shí)觸發(fā)此事件03五、事件（3）表單事件表單事件是指通過表單觸發(fā)的事件。例如在用戶注冊(cè)的表單中可以通過表單事件完成用戶名合法性檢查、唯一性檢查、用戶密碼合法性檢查等等。下面列舉幾個(gè)常用的表單事件，如表7.12所示。表7.12表單事件類別事件事件說明表單事件onblur
當(dāng)前元素失去焦點(diǎn)時(shí)觸發(fā)此事件onchange
當(dāng)前元素失去焦點(diǎn)并且元素內(nèi)容發(fā)生改變時(shí)觸發(fā)此事件onfocus
當(dāng)某個(gè)元素獲得焦點(diǎn)時(shí)觸發(fā)此事件onreset
當(dāng)表單被重置時(shí)觸發(fā)此事件onsubmit
當(dāng)表單被提交時(shí)觸發(fā)此事件03五、事件（4）鍵盤事件
鍵盤事件是指通過鍵盤動(dòng)作觸發(fā)的事件，常用于檢查用戶向頁(yè)面輸入的內(nèi)容。下面列舉幾個(gè)常用的鍵盤事件，如表7.13所示。表7.13鍵盤事件類別事件事件說明鍵盤事件onkeydown
當(dāng)鍵盤上的某個(gè)按鍵被按下時(shí)觸發(fā)此事件onkeyup
當(dāng)鍵盤上的某個(gè)按鍵被按下后彈起時(shí)觸發(fā)此事件onkeypress
當(dāng)輸入有效的字符按鍵時(shí)觸發(fā)此事件03【例7-6】表單驗(yàn)證：編寫HTML代碼
<!DOCTYPE
html><html
lang="en">
<head>
<meta
charset="UTF-8">
<meta
http-equiv="X-UA-Compatible"
content="IE=edge">
<meta
name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>表單驗(yàn)證</title>
<link
rel="stylesheet"
href="7.6表單驗(yàn)證.css"></head>
<body>
<h2>增加管理員</h2><form
action="">
<table>
<tbody>
<tr>
<td>姓名：</td>
<td><input
type="text"
name="username"><span>*</span></td>
<td>
<div>5~10個(gè)字符以內(nèi)的字母、數(shù)字和下劃線組合</div>
</td>
</tr>
<tr>
<td>密碼：</td>
<td><input
type="text"
name="pwd"><span>*</span></td>
<td>
<div>密碼為6位數(shù)字</div>
</td>
</tr>
<tr>
<td></td>
<td>
<button
name="btn"
type="button">保存</button>
<button
type="reset">重置</button>
</td>
<td></td>
</tr>
</tbody>
</table>
</form>
<script
src="7.6表單驗(yàn)證.js"></script>
</body>
</html>03【例7-6】表單驗(yàn)證：編寫CSS代碼
tdspan{color:red;}
/*默認(rèn)狀態(tài)*/tddiv{display:none;}
/*獲得焦點(diǎn)是的狀態(tài)*/.tips_info{display:block;}
/*驗(yàn)證失敗*/.tips_error{display:block;color:red;padding-left:20px;background:url("err.png")no-repeatleftcenter;}
/*驗(yàn)證成功*/.tips_success{display:block;padding-left:20px;background:url("ok.png")no-repeatleftcenter;width:0px;height:20px;overflow:hidden;}03【例7-6】表單驗(yàn)證：編寫JavaScript代碼
varform=document.forms[0];//查找觸發(fā)事件的元素vartextName=form.username;vartxtPwd=form.pwd;
//定義兩個(gè)正則表達(dá)式varnamereg=/^\w{5,10}$/;varpwdreg=/^\d{6}$/;
//綁定事件處理函數(shù)
：獲得焦點(diǎn)，失去焦點(diǎn)
//獲得焦點(diǎn)
顯示提示信息
修改class為tips_infotextName.onfocus=getFocus;//不要加小括號(hào)?。。xtPwd.onfocus=getFocus;
//獲得焦點(diǎn)functiongetFocus(){this.parentElement.nextElementSibling.firstElementChild.className="tips_info";}
//失去焦點(diǎn)驗(yàn)證格式textName.onblur=function(){verift(this,namereg);};txtPwd.onblur=function(){//傳參verift(this,pwdreg);};
//失去焦點(diǎn)驗(yàn)證functionverift(input,reg){//拿到用戶輸入內(nèi)容vardiv=input.parentElement.nextElementSibling.firstElementChild;//驗(yàn)證輸入是否匹配reg.test()if(reg.test(input.value)){//如果匹配，顯示成功修改class為tips_successdiv.className="tips_success";returntrue;}else{//如果不匹配顯示錯(cuò)誤修改class為tips_errordiv.className="tips_error";returnfalse;}}
varbtn=form.btn;btn.onclick=function(){//驗(yàn)證文本框varrn=verift(textName,namereg);varrp=verift(txtPwd,pwdreg);//判斷if(rn&&rp){form.submit();}}03案例完成效果如圖7.12所示，當(dāng)填寫表單時(shí)，將會(huì)對(duì)表單輸入進(jìn)行驗(yàn)證，不符合驗(yàn)證條件時(shí)，將會(huì)進(jìn)行錯(cuò)誤提示。03【項(xiàng)目實(shí)施】使用Javascript制作“旅行家——圖片輪播”效果任務(wù)一：布局頁(yè)面創(chuàng)建HTML文件、CSS文件及JavaScript文件，并關(guān)聯(lián)文件。項(xiàng)目布局結(jié)構(gòu)：輪播圖容器loopbox中包含3個(gè)部分：輪播圖圖片、箭頭切換按鈕以及圓點(diǎn)切換按鈕。具體代碼如下：03<!DOCTYPEhtml><html><head> <metacharset="utf-8"> <title>丹霞地貌輪播圖</title> <linkrel="stylesheet"href="loopimg.css"> <scriptsrc="/jquery/3.4.1/jquery.min.js"type="text/javascript"charset="utf-8"></script></head>
<body> <!--輪播圖容器--> <divclass="loopbox"> <!--圖片容器--> <ulclass="imglist"> <li><imgsrc="images/banner1.jpeg"></li> <li><imgsrc="images/banner2.jpeg"></li> <li><imgsrc="images/banner3.jpeg"></li> <li><imgsrc="images/banner4.jpeg"></li> <li><imgsrc="images/banner5.jpeg"></li> <li><imgsrc="images/banner1.jpeg"></li> </ul>
<!--箭頭按鈕--> <ul> <imgclass="left"onclick="changeleft()"src="images/left.png"> <imgclass="right"onclick="changeright()"src="images/right.png"> </ul> <!--圓點(diǎn)按鈕--> <ulclass="dots"> <liclass="dotactive">1</li> <liclass="dot">2</li> <liclass="dot">3</li> <liclass="dot">4</li> <liclass="dot">5</li> </ul> </div> <!--引入JavaScript--> <scripttype="text/javascript"src="loopimg.js"> </script></body></html>注意：輪播的只有5張圖片，這里布局了6張圖，第六張圖片與第1張圖片相同，這是為了實(shí)現(xiàn)無縫輪播。圓點(diǎn)切換按鈕有5個(gè)，即我們可以實(shí)時(shí)看到輪播圖目前所處的位置。箭頭按鈕有2個(gè)，可以通過它來控制前進(jìn)與后退。03任務(wù)二：CSS布局根據(jù)整體布局，分別對(duì)整體及4個(gè)部分添加樣式代碼如下：整體樣式。/*整體樣式設(shè)置*/*{margin:0;padding:0;}ul,li{list-style:none;}03任務(wù)二：CSS布局2.輪播容器樣式我們?yōu)榱俗寛D片容納在loopbox中，需要限定其寬度和高度并且將overflow屬性設(shè)置為hidden，將其余的圖片隱藏起來。同時(shí)，loopbox是靜止的，輪播圖片時(shí)輪播圖片容器imglist相對(duì)于loopbox左右移動(dòng)，因此將其position屬性設(shè)置為relative，具體代碼如下：/*輪播容器樣式*/.loopbox{width:1200px;height:550px;border:1pxsoliddarkgray;margin:40pxauto;position:relative;overflow:hidden;}03任務(wù)二：CSS布局3.輪播圖片樣式輪播圖容器imglist中布局了輪播圖片，在此對(duì)容器和圖片樣式分別進(jìn)行設(shè)置。(1)輪播圖容器imglist樣式設(shè)置imglist的定位方式為相對(duì)定位，這樣就可以通過控制Left和Right兩個(gè)箭頭來控制圖片的移動(dòng)了。由于布局了6張輪播圖片，所以將imglist的width設(shè)置為600%，只需讓圖片左浮動(dòng)即可實(shí)現(xiàn)占滿一排了。/*
輪播圖容器樣式*/.loopbox
.imglist
{
width:
600%;
height:
100%;
position:
absolute;}.loopbox.imglistli{width:1200px;height:100%;float:left;}03任務(wù)二：CSS布局(2)輪播圖片樣式把圖片float屬性設(shè)置為left，并限定其大小，具體代碼如下所示：/*輪播圖片樣式*/.loopbox.imglistliimg{width:100%;height:100%;}03任務(wù)二：CSS布局4.箭頭切換按鈕樣式設(shè)置箭頭切換按鈕樣式，具體代碼如下：/*
箭頭按鈕樣式
*/.left,
.right
{
width:
50px;
height:
50px;
position:
absolute;
opacity:
0.5;}.left:hover,
.right:hover
{
opacity:
1;}.left
{
left:
20px;
top:
250px;}.right
{
right:
20px;
top:
250px;}03任務(wù)二：CSS布局5.圓點(diǎn)切換按鈕樣式（1）把顯示次序的圓點(diǎn)按鈕放在圖片的右下角。（2）設(shè)置li標(biāo)記的樣式，及其激活狀態(tài)下樣式，
具體代碼如下：/*
圓點(diǎn)按鈕樣式
*/.dots
{
position:
absolute;
bottom:
20px;
right:
150px;}.dots
li
{
width:
20px;
height:
20px;
line-height:
20px;
background-color:
rosybrown;
border-radius:
50%;
float:
left;
margin-left:
20px;
text-align:
center;
font-size:
12px;
color:
white;
font-weight:
bolder;}.dot.active
{
background-color:
white;
color:
rosybrown;}03任務(wù)三：添加JS邏輯定義變量頁(yè)面加載完成后，首先獲取頁(yè)面中的對(duì)象，以便于進(jìn)一步監(jiān)聽事件，調(diào)用對(duì)應(yīng)的函數(shù)進(jìn)行相應(yīng)。圖片切換時(shí)，需要定義變量count來表示當(dāng)前播放圖片的虛數(shù)。打開頁(yè)面時(shí)，輪播圖默認(rèn)自動(dòng)播放，這里需要調(diào)用自動(dòng)播放函數(shù)，具體代碼如下所示：var
imglist
=
document.querySelector('.imglist');
//獲取需要移動(dòng)的盒子var
ulEle
=
document.querySelector('ul');
//獲取ulvar
distance
=
ulEle.children[1].offsetWidth;
//獲取圖片寬度var
dotEle
=
document.querySelector('.dots').children;//獲取圓點(diǎn)children數(shù)組用于綁定事件var
loopbox
=
document.querySelector('.loopbox');//獲取盒子對(duì)象var
autamotic
=
null;
var
count
=
0;
//聲明計(jì)數(shù)器AutomaticallRound();//自動(dòng)輪播und();//自動(dòng)輪播03任務(wù)三：添加JS邏輯2.定義兩側(cè)箭頭按鈕響應(yīng)函數(shù)
當(dāng)點(diǎn)擊兩側(cè)箭頭按鈕時(shí)，圖片和圓點(diǎn)按鈕的樣式都發(fā)生變化，需要分別定義相應(yīng)動(dòng)作。需要注意的是，當(dāng)圖片切換到第1張（索引為0）和第6張（索引為5）時(shí)，需要調(diào)整圖片位置，這里的兩張圖片為同一張，就是為了實(shí)現(xiàn)切換順暢的目的。左右兩側(cè)箭頭按鈕相應(yīng)函數(shù)相似，定義好右側(cè)后，復(fù)制修改可得左側(cè)對(duì)應(yīng)函數(shù)。具體代碼如下所示：
functionchangeright(){//右側(cè)箭頭按鈕點(diǎn)擊事件if(count===5){//0和5圖片是一樣的這一步目的使圖片運(yùn)動(dòng)銜接更緊密imglist.style.left='0px';//調(diào)到最前面count=0;}count++;changeimg(imglist,count);varactive=document.querySelector('.dot.active');if(count==5){//使圓點(diǎn)隨著圖片運(yùn)動(dòng)active.classList.remove('active');dotEle[0].classList.add('active');}else{active.classList.remove('active');dotEle[count].classList.add('active');}}function
changeleft()
{//綁定左點(diǎn)擊事件
if
(count
===
0)
{
imglist.style.left
=
-5
*
distance
+
'px';
count
=
5;
}
count--;
changeimg(imglist,
count);
var
active
=
document.querySelector('.dot.active');
active.classList.remove('active');
dotEle[count].classList.add('active');}033.定義函數(shù)實(shí)現(xiàn)自動(dòng)切換效果（1）使用setInterval()定時(shí)器，并結(jié)合上面定義好的向左右切換的函數(shù)，即可可實(shí)現(xiàn)自動(dòng)切換效果，代碼如下所示(左)：（2）當(dāng)鼠標(biāo)懸停在圖片上時(shí)，使用clearInterval()清除定時(shí)效果，暫停圖片自動(dòng)切換；當(dāng)鼠標(biāo)離開圖片時(shí)，繼續(xù)調(diào)用自動(dòng)輪播函數(shù)。具體代碼如下(右)：
functionAutomaticallRound(){//自動(dòng)輪播autamotic=setInterval(function(){changeright();//調(diào)用方法},4000)}
loopbox.onmouseenter=function(){//鼠標(biāo)hover盒子的時(shí)候停止輪播clearInterval(autamotic);}loopbox.onmouseleave=function(){//鼠標(biāo)離開盒子輪播繼續(xù)AutomaticallRound();}034.設(shè)置圓點(diǎn)切換按鈕動(dòng)作當(dāng)點(diǎn)擊圓點(diǎn)切換按鈕時(shí)，按鈕樣式發(fā)生變化，同時(shí)切換圖片。分別定義點(diǎn)擊圓點(diǎn)切換按鈕的響應(yīng)函數(shù)，以及切換圖片函數(shù)。（1）定義圓點(diǎn)切換按鈕切換動(dòng)作：當(dāng)點(diǎn)擊圓點(diǎn)按鈕時(shí)，首先遍歷按鈕對(duì)象，找出被點(diǎn)擊的圓點(diǎn)按鈕索引。接下來更換激活按鈕樣式，刪除上一次激活按鈕的激活屬性，為當(dāng)前點(diǎn)擊按鈕添加激活屬性，并調(diào)用切換圖片函數(shù)，具體代碼如下：
for(vari=0;i<dotEle.length;i++){//給圓點(diǎn)綁定事件切換圖片dotEle[i].index=i;//聲明indexdotEle[i].onclick=function(){//綁定點(diǎn)擊事件document.querySelector('.dot.active').classList.remove('active');//刪除類名this.classList.add('active');//添加類名count=this.index;//給計(jì)數(shù)器賦值changeimg(imglist,count);//改變圖片}}03（2）定義點(diǎn)擊圓點(diǎn)按鈕時(shí)切換圖片函數(shù)，具體代碼如下：
functionchangeimg(ele,count){//改變圖片clearInterval(ele.timmer);//清除計(jì)時(shí)器防止連點(diǎn)時(shí)候發(fā)生錯(cuò)誤ele.timmer=setInterval(function(){varstart=ele.offsetLeft;varstep=(-distance*count-start)/10;if(Math.abs(step)<1){step=step>0?1:Math.floor(step);}start+=step;ele.style.left=start+'px';if(start===-(distance*count)){//-是因?yàn)閳D片的運(yùn)動(dòng)是反的clearInterval(ele.timmer);//清除定時(shí)器console.lo
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 2026年大連雙D高科產(chǎn)業(yè)發(fā)展有限公司公開選聘筆試備考試題及答案解析
- 2026江西贛州市章貢區(qū)社會(huì)組織黨委專職黨務(wù)工作者招聘1人考試備考題庫(kù)及答案解析
- 2026年浙江工業(yè)大學(xué)之江學(xué)院招聘高層次人才38人考試備考試題及答案解析
- 2026年福建省福州市閩侯縣第四中學(xué)春季招聘臨聘教師筆試參考題庫(kù)及答案解析
- 2026年亳州利辛縣張村鎮(zhèn)中心衛(wèi)生院臨時(shí)護(hù)士招聘2名考試備考題庫(kù)及答案解析
- 2026廣東廣州醫(yī)科大學(xué)附屬第五醫(yī)院人才招聘54人（一）考試參考試題及答案解析
- 2026年深圳市福田區(qū)嘉鑫幼兒園公開招聘教師、保安員備考題庫(kù)及答案詳解參考
- 2026年生物分子高效分離與表征研究組(1810組)事業(yè)編制外項(xiàng)目聘用人員招聘?jìng)淇碱}庫(kù)及答案詳解一套
- 2026年海曙區(qū)集士港鎮(zhèn)招聘編外人員人員備考題庫(kù)及參考答案詳解
- 2026年?duì)I山發(fā)展投資（控股）有限責(zé)任公司招聘?jìng)淇碱}庫(kù)有答案詳解
- 消防防排煙勞務(wù)合同協(xié)議
- 常用電動(dòng)工具安全培訓(xùn)
- 民樂團(tuán)管理制度
- 斷絕父母協(xié)議書范本
- 校家社協(xié)同育人專題家長(zhǎng)培訓(xùn)
- 2024-2025學(xué)年北師大版八年級(jí)上學(xué)期期末復(fù)習(xí)數(shù)學(xué)測(cè)試題（含答案）
- 鎮(zhèn)衛(wèi)生院2025年工作總結(jié)及2025年工作計(jì)劃
- 2024年太陽(yáng)能光伏發(fā)電項(xiàng)目EPC建設(shè)合同
- 煙葉復(fù)烤能源管理
- D701-1~3封閉式母線及橋架安裝(2004年合訂本)文檔
- 裝修陪跑合同范本
評(píng)論
0/150
提交評(píng)論