用原生的js程式碼實現圖片輪播
- 網際網路
- 關注:3W次
初學前端開發的小朋友們可能還不會用原生的js程式碼實現圖片的輪播。在面試的時候,有的面試官可能會讓你用原生的js程式碼實現圖片的輪播。好,今天,我就給大家準備一些乾貨,讓新手快速掌握圖片的輪播。
操作方法
(01)第一步:要實現圖片輪播,首先要有html的佈局,如圖所示:
(02)第二步:在根目錄新建一個資料夾,名字命名為:css 。並在css資料夾裡新建一個檔案。這個檔案是設定HTML的樣式。程式碼如圖所示:
(03)第三步:就是我今天要講的重點,即用原生的js程式碼實現圖片的輪播。首先在根目錄新建一個資料夾,命名為js ,在js資料夾裡新建一個檔案。這個檔案就是為了實現圖片輪播的效果,程式碼如圖所示:
(04)程式碼的解析:在第三個步驟裡,檔案開頭用到ad=function(){} 是因為要讓window載入整個頁面後再執行js裡面的程式碼。
(05)以上程式碼完成之後,直接在瀏覽器中開啟,就會看到你想要的效果,當滑鼠移到圖片上面,圖片停止;當滑鼠離開圖片,圖片又自動輪播。是不是很神奇,也很簡單?
特別提示
如果遇到什麼問題可以找我
喜歡程式設計的小朋友們,加油!明天會更加美好...
- 文章版權屬於文章作者所有,轉載請註明 https://miaozhigu.com/zh-tw/sm/hulianwang/l7kd5g.html