js實(shí)現(xiàn)圖片輪播切換效果

第js實(shí)現(xiàn)圖片輪播切換效果最近在b站上學(xué)習(xí)的時(shí)候，學(xué)到了一個(gè)用原生js實(shí)現(xiàn)圖片輪播切換效果的實(shí)戰(zhàn)，碼下來收藏

上圖是這個(gè)小實(shí)戰(zhàn)的效果圖，整個(gè)小實(shí)戰(zhàn)所實(shí)現(xiàn)的功能是圖片自動(dòng)輪播切換、點(diǎn)擊上下鍵圖片切換上下圖片、點(diǎn)擊右下角圓點(diǎn)切換相應(yīng)圖片、點(diǎn)擊主菜單顯示相應(yīng)子菜單內(nèi)容。

html頁面布局

body

!--主區(qū)域，存放所有需要元素--

divid="main"

!--導(dǎo)航菜單--

div/div

!--子菜單--

divid="sub-menu"/div

!--主菜單--

divid="menu-content"

div

ahref="#"

spanitem/span

i#xe666;/i

/div

div

ahref="#"

spanitem/span

i#xe666;/i

/div

div

ahref="#"

spanitem/span

i#xe666;/i

/div

div

ahref="#"

spanitem/span

i#xe666;/i

/div

/div

!--圖片輪播--

divid="banner"

ahref="#"

!--slide-active表示當(dāng)前需要顯示圖片的狀態(tài)--

div/div

ahref="#"

div/div

ahref="#"

div/div

/div

!--上一張、下一張按鈕--

!--javascript:void(0)表示這個(gè)a標(biāo)簽不做任何鏈接跳轉(zhuǎn)--

ahref="javascript:void(0)"id="prev"

imgsrc="images/r-btn.png"alt="上一張"

ahref="javascript:void(0)"id="next"

imgsrc="images/r-btn.png"alt="下一張"

!--圓點(diǎn)導(dǎo)航--

divid="dots"

span/span

span/span

span/span

/div

/div

/div

/body

js綁定事件

//封裝一個(gè)代替getElementById()的方法

functionbyId(id){

//對(duì)id的類型做判斷

returntypeof(id)==="string"document.getElementById(id):id;

//封裝切換圖片的函數(shù)（圖片和圓點(diǎn)是配套的，圖片有多少張圓點(diǎn)就有多少個(gè)，圖片切換到第幾張，圓點(diǎn)就到第幾個(gè)）

functionchangeImg(){

//遍歷banner下所有的div，將其隱藏

for(vari=0;ii++){

pics[i].style.display="none";

dots[i].className="";

//將span上的“active”類隱藏，點(diǎn)擊圓點(diǎn)以后將其顯示

}

pics[index].style.display="block";//根據(jù)index找到當(dāng)前圖片，將其顯示出來

dots[index].className="active";

//根據(jù)index找到當(dāng)前span，將其顯示出來

functionslideImg(){

varmain=byId("main");

//鼠標(biāo)滑到圖片上清除定時(shí)器，鼠標(biāo)離開圖片繼續(xù)

main.onmouseover=function(){

//滑到圖片上清除定時(shí)器,圖片停止輪播

if(timer){

clearInterval(timer);

}

}

//調(diào)用onmouseout事件

main.onmouseout=function(){

//鼠標(biāo)離開定時(shí)器繼續(xù),每隔三秒切換一次圖片

timer=setInterval(function(){

index++;//len=3所以index的值只能是0,1,2

if(index=len){

index=0;

}

//切換圖片

changeImg();

},2000);

}

//自動(dòng)在main上觸發(fā)鼠標(biāo)離開