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

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

操作方法

（01）第一步：要實現圖片輪播，首先要有html的佈局，如圖所示：

（02）第二步：在根目錄新建一個資料夾，名字命名為：css  。並在css資料夾裡新建一個檔案。這個檔案是設定HTML的樣式。程式碼如圖所示：

（03）第三步：就是我今天要講的重點，即用原生的js程式碼實現圖片的輪播。首先在根目錄新建一個資料夾，命名為js ,在js資料夾裡新建一個檔案。這個檔案就是為了實現圖片輪播的效果，程式碼如圖所示：

（04）程式碼的解析：在第三個步驟裡，檔案開頭用到ad=function(){} 是因為要讓window載入整個頁面後再執行js裡面的程式碼。

（05）以上程式碼完成之後，直接在瀏覽器中開啟，就會看到你想要的效果，當滑鼠移到圖片上面，圖片停止；當滑鼠離開圖片，圖片又自動輪播。是不是很神奇，也很簡單？

特別提示

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

喜歡程式設計的小朋友們，加油！明天會更加美好...