JavaScript案例-輪播圖

目錄

一、輪播圖知識點梳理

二、輪播圖頁面結構

三、需要用到的封裝函數--獲取元素屬性getStyle()，圖片位移move()

四、輪播圖js部分

---

 

一、輪播圖知識點梳理

1、圖片自動輪播--間隔定時器，圖片元素位移move函數

2、鼠標移入/移出，圖片停止/開啓輪播--清除定時器，onmouseenter，onmouseleave

3、左右箭頭事件圖片切換--n++，n--，圖片位移move函數

4、每個小圓點點擊事件對應圖片切換--背景樣式設置

二、輪播圖頁面結構

box>ul>li>img

共五張圖，最後一張=第一張圖--實現無縫輪播效果

三、需要用到的封裝函數--獲取元素屬性getStyle()，圖片位移move()

   

四、輪播圖js部分

1、圖片輪播--間隔定時器，移動ul位移

  

2、  鼠標移入移出--關閉定時器開啓定時器

  

3、左右箭頭點擊事件切換圖片

4、每個小圓點事件--第一個for，設置自定義屬性index標記每個圓點的下標，注意要將用戶點擊的小圓點全部清除樣式--第二個for，再設置當前圓點樣式