用原生的js代码实现图片轮播

初学前端开发的小朋友们可能还不会用原生的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张

特别提示

如果遇到什么问题可以找我

喜欢编程的小朋友们,加油!明天会更加美好...