酷知百科網

位置:首頁 > 遊戲數碼 > 互聯網

用原生的js代碼實現圖片輪播

互聯網3.14W

初學前端開發的小朋友們可能還不會用原生的js代碼實現圖片的輪播。在面試的時候,有的面試官可能會讓你用原生的js代碼實現圖片的輪播。好,今天,我就給大家準備一些乾貨,讓新手快速掌握圖片的輪播。

用原生的js代碼實現圖片輪播

操作方法

(01)第一步:要實現圖片輪播,首先要有html的佈局,如圖所示:

用原生的js代碼實現圖片輪播 第2張

(02)第二步:在根目錄新建一個檔案夾,名字命名爲:css  。並在css檔案夾裏新建一個檔案。這個檔案是設定HTML的樣式。代碼如圖所示:

用原生的js代碼實現圖片輪播 第3張

(03)第三步:就是我今天要講的重點,即用原生的js代碼實現圖片的輪播。首先在根目錄新建一個檔案夾,命名爲js ,在js檔案夾裏新建一個檔案。這個檔案就是爲了實現圖片輪播的效果,代碼如圖所示:

用原生的js代碼實現圖片輪播 第4張
用原生的js代碼實現圖片輪播 第5張

(04)代碼的解析:在第三個步驟裏,檔案開頭用到ad=function(){} 是因爲要讓window加載整個頁面後再執行js裏面的代碼。

用原生的js代碼實現圖片輪播 第6張

(05)以上代碼完成之後,直接在瀏覽器中開啟,就會看到你想要的效果,當鼠標移到圖片上面,圖片停止;當鼠標離開圖片,圖片又自動輪播。是不是很神奇,也很簡單?

用原生的js代碼實現圖片輪播 第7張

特別提示

如果遇到什麼問題可以找我

喜歡編程的小朋友們,加油!明天會更加美好...

標籤:js 輪播 原生 代碼