天天看點

原生js做圖檔切換.

開發工具與關鍵技術:DW/浏覽器;JavaScript
作者:黃啟浩
撰寫時間:2019.02.07
           

在很多小白剛學前端的時候,用的是原生的js而非插件。現在就讓小白們了解一下原生的輪播js。

    基本思路是,要顯示圖檔的盒子等同圖檔大小,在此盒子裡面放圖檔的盒子,圖檔就相對于圖檔盒子進行相對定位。

原生js做圖檔切換.

對了,因為這裡要切換5張圖檔,使其循環切換就要在第一張前放第五張圖檔,在第五張後面放第一張圖檔。這是一個邏輯的問        題。

    好了,來看js部分

原生js做圖檔切換.

切換一張圖檔需要移動300個像素,我們通過拆分這300像素,移動多少次能達到300像素,每次移動是多少像素,然後就通過計時    器,自動運動次數來達到移動一張圖檔為止。

感謝大家的浏覽,如有疑問可在評論留言哦!