JavaScript網(wǎng)頁(yè)特效制作

輪播圖特效制作htmlh5imgjavascriptwebcsscolorhr目錄任務(wù)情境任務(wù)目標(biāo)任務(wù)描述任務(wù)實(shí)施學(xué)習(xí)資源考核評(píng)價(jià)課后拓展htmlh5imgjavascriptwebcolorhr任務(wù)情境廣西少數(shù)民族文化資源網(wǎng)是一個(gè)通過(guò)網(wǎng)站展示廣西少數(shù)民族在文化、節(jié)日、美食、古跡等方面資源的的綜合性資源類(lèi)的網(wǎng)站。其中的節(jié)日頁(yè)面頂部的圖片我們需要將更改為輪播圖，輪播圖在如今的網(wǎng)站當(dāng)中是非常實(shí)用的一個(gè)頁(yè)面功能，為了完成這個(gè)功能就需要加入JavaScript特效。工作任務(wù)單工作任務(wù)單任務(wù)要求根據(jù)效果圖完成服飾詳情頁(yè)側(cè)邊欄制作甲方提供的設(shè)計(jì)圖

如右圖所示評(píng)判標(biāo)準(zhǔn)1.能夠掌握getElement方法獲取html頁(yè)面中輪播圖片元素；2.能夠正確使用for循環(huán)語(yǔ)句將上次循環(huán)的圖片active類(lèi)刪掉；3.能夠正確使用if條件語(yǔ)句嵌套判斷圖片的張數(shù)；4.能夠正確設(shè)置事件監(jiān)聽(tīng)；5.能夠正確使用定時(shí)器的用法；作品提交要求站點(diǎn)文件夾評(píng)判標(biāo)準(zhǔn)1.能夠掌握getElement方法獲取html頁(yè)面中輪播圖片元素；2.能夠正確使用for循環(huán)語(yǔ)句將上次循環(huán)的圖片active類(lèi)刪掉；3.能夠正確使用if條件語(yǔ)句嵌套判斷圖片的張數(shù)；4.能夠正確設(shè)置事件監(jiān)聽(tīng)；5.能夠正確使用定時(shí)器的用法；任務(wù)目標(biāo)任務(wù)目標(biāo)能夠掌握getElement方法獲取html頁(yè)面中輪播圖片元素；能夠正確使用for循環(huán)語(yǔ)句將上次循環(huán)的圖片active類(lèi)刪掉；能夠正確使用if條件語(yǔ)句嵌套判斷圖片的張數(shù)；能夠正確設(shè)置事件監(jiān)聽(tīng)；能夠正確使用定時(shí)器的用法；任務(wù)描述本任務(wù)是基于節(jié)日詳情頁(yè)進(jìn)行JavaScript的制作。任務(wù)要求是每次打開(kāi)網(wǎng)頁(yè)，都能看到輪播圖能正常切換，同時(shí)輪播圖兩旁都有左右按鈕功能，可以點(diǎn)擊并實(shí)現(xiàn)圖片切換到上一張或者下一張的特效，現(xiàn)在我們將學(xué)習(xí)如何利用JavaScript完成輪播圖特效。任務(wù)實(shí)施圖2

效果圖（有特效）圖1

效果圖（無(wú)特效）效果圖展示編寫(xiě)JS特效重構(gòu)html+css找出原頁(yè)面輪播的HTML修改html找出原頁(yè)面輪播的CSS修改CSS步驟一步驟二步驟三步驟四重構(gòu)html+css操作步驟步驟六效果圖展示編寫(xiě)JS特效任務(wù)實(shí)施重構(gòu)html+css鏈接外部JavaScript文件獲取頁(yè)面元素設(shè)定變量，表示當(dāng)前圖片編寫(xiě)一個(gè)ClearActive類(lèi)步驟一步驟二步驟三步驟四編寫(xiě)JS特效操作步驟設(shè)置左右按鈕功能步驟五設(shè)置按鈕監(jiān)聽(tīng)事件步驟六添加定時(shí)器步驟七效果圖展示重構(gòu)html+css編寫(xiě)JS特效任務(wù)實(shí)施學(xué)習(xí)資源數(shù)組1.什么是數(shù)組數(shù)組是一種特殊的變量，它能夠一次存放一個(gè)以上的值。2.數(shù)組的作用數(shù)組可以用一個(gè)單一的名稱(chēng)存放很多值，并且還可以通過(guò)引用索引號(hào)來(lái)訪問(wèn)這些值。3.如何創(chuàng)建數(shù)組

4.如何訪問(wèn)數(shù)組元素通過(guò)引用索引號(hào)（下標(biāo)號(hào)）來(lái)引用某個(gè)數(shù)組元素，示例如下：5.如何遍歷數(shù)組元素遍歷數(shù)組的含義是對(duì)數(shù)組所有元素進(jìn)行訪問(wèn)，遍歷數(shù)組的最安全方法是使用"for"循環(huán)。實(shí)例如下：

方法一：語(yǔ)法:vararray-name=[item1,item2,...];實(shí)例:varcars=["Saab","Volvo","BMW"];方法二：varcars=newArray("Saab","Volvo","BMW");//利用關(guān)鍵詞new創(chuàng)建數(shù)組varcars=["Saab","Volvo","BMW"];document.getElementById("demo").innerHTML=cars[0];varfruits,text,fLen,i;fruits=["Banana","Orange","Apple","Mango"];fLen=fruits.length;text="<ul>";for(i=0;i<fLen;i++){

text+="<li>"+fruits[i]+"</li>";}學(xué)習(xí)資源數(shù)組6.如何給數(shù)組添加元素1.向數(shù)組添加新元素最佳的方法是使用push（）方法。示例如下：2.也可以使用

length

屬性向數(shù)組添加新元素。示例如下：7.如何改變數(shù)組中的值varfruits=["Banana","Orange","Apple","Mango"];fruits.push("Lemon")//向fruits添加一個(gè)新元素(Lemon)varfruits=["Banana","Orange","Apple","Mango"];fruits[fruits.length]="Lemon";//向fruits添加一個(gè)新元素(Lemon)varcars=["Saab","Volvo","BMW"];cars[0]="Opel";document.getElementById("demo").innerHTML=cars[0];考核評(píng)價(jià)班級(jí)：姓名：學(xué)號(hào)任務(wù)名稱(chēng)：頁(yè)面頭部固定評(píng)價(jià)項(xiàng)目評(píng)價(jià)標(biāo)準(zhǔn)自評(píng)情況考核情況課前自主探究（10%）完成課前學(xué)習(xí)通中下發(fā)任務(wù)￡完成￡基本完成R未完成□完成□基本完成□未完成工作過(guò)程（50%）JS特效分析能夠進(jìn)行正確的分析特效所需的JS方法□完成□基本完成□未完成□完成□基本完成□未完成

獲取頁(yè)面元素能夠進(jìn)行正確獲取頁(yè)面元素□完成□基本完成□未完成□完成□基本完成□未完成

if語(yǔ)句編寫(xiě)能夠正確使用IF嵌套循環(huán)□完成□基本完成□未完成□完成□基本完成□未完成

事件監(jiān)聽(tīng)能夠正確編寫(xiě)事件代碼□完成□基本完成□未完成□完成□基本完成□未完成

定時(shí)器能夠正確利用定時(shí)器完成圖片的輪換□完成□基本完成□未完成□完成□基本完成□未完成項(xiàng)目成果（30%）工作完整能夠按時(shí)完成任務(wù)□是□是

工作規(guī)范能按企業(yè)規(guī)范要求進(jìn)行操作□是□是

成果展示能準(zhǔn)確表達(dá)，匯報(bào)成果□是□是非技術(shù)考評(píng)（10%）態(tài)度學(xué)習(xí)態(tài)度是否端正□是□是

紀(jì)律遵守紀(jì)律□是□是

協(xié)作有交流、團(tuán)隊(duì)合作□是□