【JS学习总结】如何使用JS实现轮播图效果

前言：这个系列主要是对之前学习JavaScript实现的一些小demo的总结，总觉得不能这样学过了就算了，趁着假期就好好总结一下吧。

在平时的网站开发过程中，我们经常会遇到这样的一个需求：在首页实现一个轮播图效果。

那么，我们应该怎么实现这种效果呢？

首先，来分析一下，轮播图其实也就是一个图片，在一定的时间内这个图片会变化，置换成另外一个图片，根据这个逻辑，我们可以确定可以这样使用JS代码来实现这个效果

使用到的技术点如下：

获取元素 document.getElementById(“id 名称”) 
 
事件(onload) 
 
定时操作：setInterval(“changeImage()”,3000); 

代码书写步骤如下;

第一步：确定事件(onload)并为其绑定一个函数

第二步：书写绑定的这个函数

第三步：书写定时任务(setInterval)

第四步：书写定时任务里面的函数

第五步：通过变量的方式，进行循环(获取轮播图的位置，并设置 src 属性)

注意点：

 1：在循环的时候需要注意到了最后一 张图片的时候要重置

 2：

3： 在指定位置要定义 id，方便JS代码获取对应的标签元素

JS代码实现如下：