服務(wù)熱線 400-660-8066
網(wǎng)站建設(shè)
服務(wù)熱線 400-660-8066
網(wǎng)站建設(shè)
輪播圖效果在網(wǎng)站所處可見，今天來做個簡單的輪播圖效果，有輪播指示點，有切換按鈕箭頭，效果如下圖所示：css樣式如圖：html結(jié)構(gòu)如圖：js如圖：html結(jié)構(gòu)和css樣式?jīng)]什么好說的，重點是js。如圖中所示，獲取需要輪播的個數(shù)（slide），用賦值給size_，獲取初始默認(rèn)顯示（slide）的下標(biāo)，用賦值給i，當(dāng)點擊左按鈕時，重新獲取默認(rèn)顯示（slide）的下標(biāo)，因為隨著按鈕的點擊，默認(rèn)顯示（slide）的下標(biāo)會增加或減小，每點擊一下都要重新獲取，因為是左按鈕，且做了循環(huán)輪播，當(dāng)輪播到第一個時，再次點擊需要輪播到最后一個，所以這里要加一個if判斷，當(dāng)i等于0時，i等于輪播個數(shù)減一（size_-1），其余i遞減（i--），右按鈕一樣的道理，當(dāng)輪播到最后一個，需要輪播到第一個，if判斷，當(dāng)i等于輪播個數(shù)減一（size_-1），i等于0，其余i遞增（i++）。
同時點擊按鈕時，對應(yīng)的指示點根據(jù)i的下標(biāo)值，同時添加刪除類名active。
指示點點擊時，獲取當(dāng)前輪播的默認(rèn)下標(biāo)，賦值給i，為下標(biāo)為i的slide添加類名active，使其顯示，其余的slide刪除類名active隱藏，跟當(dāng)前指示點添加默認(rèn)類名active，其余的指示點刪除類名active。
添加動力小姐姐微信
電話咨詢
400-660-8066
