《Web前端開發(fā)項(xiàng)目教程》實(shí)現(xiàn)圖片的滑動(dòng)輪播

項(xiàng)目11網(wǎng)站首頁中的動(dòng)態(tài)效果任務(wù)11-2實(shí)現(xiàn)圖片的滑動(dòng)輪播任務(wù)11-2實(shí)現(xiàn)圖片的滑動(dòng)輪播

知識(shí)點(diǎn)掌握元素的絕對(duì)定位、相對(duì)定位掌握J(rèn)S的基本用法技能點(diǎn)能夠根據(jù)頁面元素的位置決定使用哪種定位方式能夠熟練應(yīng)用固定定位、絕對(duì)定位和相對(duì)定位能夠根據(jù)需要書寫JS腳本一、滑動(dòng)輪播圖原理分析滑動(dòng)輪播圖的核心是把圖片組合成一行序列，通過左右移動(dòng)，以及父元素的overflow：hidden來決定顯示的圖片。一、滑動(dòng)輪播圖原理分析JavaScript代碼主要是根據(jù)事件來動(dòng)態(tài)改變每一幅圖片的left坐標(biāo)。默認(rèn)最開始left的值為0，這時(shí)正好顯示出第一幅圖片。接下來，通過鼠標(biāo)單擊或者自動(dòng)時(shí)間間隔循環(huán)地改變left的值，使得圖片運(yùn)動(dòng)起來。假設(shè)一幅圖片的寬度是1000px，二、搭建基本界面--1.HTML代碼<divid="box"><divclass="arrow-left"id="arrow-left"><</div><divclass="arrow-right"id="arrow-right">></div><ulid="multi-circles"><li></li><li></li><li></li><li></li></ul><divid="multi-images"><imgsrc="img01/ban_1.jpg"><imgsrc="img01/ban_2.jpg"><imgsrc="img01/ban_3.jpg"><imgsrc="img01/ban_4.jpg"><divclass="clear"></div></div></div>頁面元素主要分成三個(gè)部分：左右兩個(gè)箭頭、圓點(diǎn)序列、圖片序列。全部運(yùn)用絕對(duì)定位對(duì)其布局，通過z-index確定他們的層疊關(guān)系。二、搭建基本界面--2.CSS樣式表#box{position:relative;width:1000px;height:360px;/*overflow:hidden;*/}#multi-images{position:absolute;left:0;top:0;z-index:1;width:100%;height:100%;font-size:0;white-space:nowrap;}#multi-imagesimg{width:100%;height:100%;display:inline-block;}單張圖片的尺寸要和視圖容器的尺寸相吻合，假定容器寬1000px，高360px，圖片相對(duì)容器絕對(duì)定位，width:100%;height:100%;即可，使用white-space:nowrap;阻止圖像在容器內(nèi)換行。二、搭建基本界面--2.CSS樣式表#multi-circles{position:absolute;right:30px;bottom:10px;z-index:2;}#arrow-right,#arrow-left{font-weight:bold;font-size:36px;position:absolute;top:50%;margin-top:-20px;height:40px;z-index:3;}#arrow-right{right:10px;}#arrow-left{left:10px;}添加左右兩個(gè)箭頭、圓點(diǎn)序列的樣式。三、輪播圖中JS的腳本應(yīng)用--1．確定圖片序號(hào)vararrowLeft=document.getElementById("arrow-left");vararrowRight=document.getElementById("arrow-right");varmultiImages=document.getElementById("multi-images");varcircles=document.getElementById("multi-circles").getElementsByTagName("li");varbox=document.getElementById("box");（1）進(jìn)行DOM操作，獲取HTML組件。（2）定義全局變量currentIndex，初始為0，表示當(dāng)前顯示圖片的序號(hào)為0。varcurrentIndex=0;三、輪播圖中JS的腳本應(yīng)用--1．確定圖片序號(hào)arrowLeft.addEventListener("click",preMove);arrowRight.addEventListener("click",nextMove);for(vari=0;i<circles.length;i++){circles[i].setAttribute("id",i);circles[i].addEventListener("mouseenter",overCircle);}（3）為箭頭和圓點(diǎn)綁定事件三、輪播圖中JS的腳本應(yīng)用--1．確定圖片序號(hào)//單擊左箭頭后執(zhí)行的操作functionpreMove(){currentIndex--;if(currentIndex<0){currentIndex=3;}}//單擊左箭頭后執(zhí)行的操作functionnextMove(){currentIndex++;if(currentIndex>=4){currentIndex=0;}}(4）設(shè)置滑過圓點(diǎn)以及單擊左右箭頭后變量currentIndex值的變化情況。//滑過圓點(diǎn)時(shí)執(zhí)行的操作functio