傳奇做網站H5輪播圖超級詳細源代碼代碼以及詳細解釋,dedecms cms常用輪播圖片,支持所有cms自動調用,HTML5輪播圖全代碼
一、傳奇頁面加載、獲取整個容器、所有放數字索引的li及放圖片列表的ul、定義放定時器的變量、存放當前索引的變量index
222.jpg (50.13 KB, 下載次數: 239)
下載附件
傳奇網站輪播圖
2021-9-15 17:54 上傳
二、添加定時器，每隔2秒鐘index遞增一次、調用一次切換圖片函數
1、 index不能一直無限制的遞增下去，需做判斷
2、調用切換圖片函數時需將遞增之后的index作為參數傳過去
三、定義圖片切換函數
1.遍歷所有放數字索引的li，將每個li上的類去掉。
2.根據傳遞過來的index值找到對應的li給它添加類設為當前高亮顯示。
3. 根據傳遞過來的index值計算放圖片的ul的top值
4. 改變index的值，讓其等于傳遞過來的參數值
注意：放圖片的ul的top值=-index*單張圖片的高度（所有圖片必須等高）
四、鼠標劃過整個容器時，圖片停止切換，離開繼續
1. 鼠標滑過整個容器時清除定時器
2. 鼠標離開時繼續執行定時器，切換至下一張圖片
五、遍歷所有放數字的li，且給他們添加索引、鼠標滑過時切換至對應的圖片。
鼠標滑過時調用圖片切換函數，將滑過的li的索引傳過去。
內含兩個模板一個Html傳奇輪播圖,一個織夢cms的dede的程序代碼以寫好,直接替換ID即可。
下載地址
html輪播圖源碼網站模板「簡潔完整」.rar
|
|
收藏
