服務(wù)熱線 400-660-5555 （轉(zhuǎn)1）
網(wǎng)站建設(shè)
服務(wù)熱線 400-660-5555 （轉(zhuǎn)1）
網(wǎng)站建設(shè)
輪播圖效果在網(wǎng)站所處可見，今天來(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í)添加刪除類名active。
指示點(diǎn)點(diǎn)擊時(shí)，獲取當(dāng)前輪播的默認(rèn)下標(biāo)，賦值給i，為下標(biāo)為i的slide添加類名active，使其顯示，其余的slide刪除類名active隱藏，跟當(dāng)前指示點(diǎn)添加默認(rèn)類名active，其余的指示點(diǎn)刪除類名active。
添加動(dòng)力小姐姐微信
電話咨詢
400-660-5555 （轉(zhuǎn)1）
