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

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

操作方法

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

（02）第二步：在根目錄新建一個文件夾，名字命名為：css  。並在css文件夾裏新建一個文件。這個文件是設置HTML的樣式。代碼如圖所示：

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

（04）代碼的解析：在第三個步驟裏，文件開頭用到ad=function(){} 是因為要讓window加載整個頁面後再執行js裏面的代碼。

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

特別提示

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

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