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

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

知識點掌握元素的絕對定位、相對定位掌握JS的基本用法技能點能夠根據(jù)頁面元素的位置決定使用哪種定位方式能夠熟練應(yīng)用固定定位、絕對定位和相對定位能夠根據(jù)需要書寫JS腳本一、滑動輪播圖原理分析滑動輪播圖的核心是把圖片組合成一行序列，通過左右移動，以及父元素的overflow：hidden來決定顯示的圖片。一、滑動輪播圖原理分析JavaScript代碼主要是根據(jù)事件來動態(tài)改變每一幅圖片的left坐標(biāo)。默認最開始left的值為0，這時正好顯示出第一幅圖片。接下來，通過鼠標(biāo)單擊或者自動時間間隔循環(huán)地改變left的值，使得圖片運動起來。假設(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>頁面元素主要分成三個部分：左右兩個箭頭、圓點序列、圖片序列。全部運用絕對定位對其布局，通過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，圖片相對容器絕對定位，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;}添加左右兩個箭頭、圓點序列的樣式。三、輪播圖中JS的腳本應(yīng)用--1．確定圖片序號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）進行DOM操作，獲取HTML組件。（2）定義全局變量currentIndex，初始為0，表示當(dāng)前顯示圖片的序號為0。varcurrentIndex=0;三、輪播圖中JS的腳本應(yīng)用--1．確定圖片序號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）為箭頭和圓點綁定事件三、輪播圖中JS的腳本應(yīng)用--1．確定圖片序號//單擊左箭頭后執(zhí)行的操作functionpreMove(){currentIndex--;if(currentIndex<0){currentIndex=3;}}//單擊左箭頭后執(zhí)行的操作functionnextMove(){currentIndex++;if(currentIndex>=4){currentIndex=0;}}(4）設(shè)置滑過圓點以及單擊左右箭頭后變量currentIndex值的變化情況。//滑過圓點時執(zhí)行的操作functio