輪播圖效果在網(wǎng)站所處可見(jiàn)，今天來(lái)做個(gè)簡(jiǎn)單的輪播圖效果，有輪播指示點(diǎn)，有切換按鈕箭頭，效果如下圖所示：

css樣式如圖：

html結(jié)構(gòu)如圖：

js如圖：

    html結(jié)構(gòu)和css樣式?jīng)]什么好說(shuō)的，重點(diǎn)是js。如圖中所示，獲取需要輪播的個(gè)數(shù)（slide），用賦值給size_，獲取初始默認(rèn)顯示（slide）的下標(biāo)，用賦值給i，當(dāng)點(diǎn)擊左按鈕時(shí)，重新獲取默認(rèn)顯示（slide）的下標(biāo)，因?yàn)殡S著按鈕的點(diǎn)擊，默認(rèn)顯示（slide）的下標(biāo)會(huì)增加或減小，每點(diǎn)擊一下都要重新獲取，因?yàn)槭亲蟀粹o，且做了循環(huán)輪播，當(dāng)輪播到第一個(gè)時(shí)，再次點(diǎn)擊需要輪播到最后一個(gè)，所以這里要加一個(gè)if判斷，當(dāng)i等于0時(shí)，i等于輪播個(gè)數(shù)減一（size_ - 1），其余i遞減（i--），右按鈕一樣的道理，當(dāng)輪播到最后一個(gè)，需要輪播到第一個(gè)，if判斷，當(dāng)i等于輪播個(gè)數(shù)減一（size_ - 1），i等于0，其余i遞增（i++）。
同時(shí)點(diǎn)擊按鈕時(shí)，對(duì)應(yīng)的指示點(diǎn)根據(jù)i的下標(biāo)值，同時(shí)添加刪除類(lèi)名active。
指示點(diǎn)點(diǎn)擊時(shí)，獲取當(dāng)前輪播的默認(rèn)下標(biāo)，賦值給i，為下標(biāo)為i的slide添加類(lèi)名active，使其顯示，其余的slide刪除類(lèi)名active隱藏，跟當(dāng)前指示點(diǎn)添加默認(rèn)類(lèi)名active，其余的指示點(diǎn)刪除類(lèi)名active。