基础轮播图

基础轮播图

下面我们使用Visual Studio这个软件来写一个小案例，我们可以用写一个简单的方法，就是实现基础的轮播图的功能效果。
那么这个代码要怎么写呢，首先我们需要先在界面上写一下的Html的代码，我们来看一下界面的代码是什么。
我们先看一下Html页面的截图：

在截图中我们可以看到界面的代码就是，在一个大的div里面写了一个div嵌套着4张img图片。接着写完了html的代码我们就需要去看一下style给他设置的属性值。看一下style属性代码截图：

从上面可以看到，给这个标签写两个标签的属性代码，接着定义好界面的属性代码我们接着就需要写一下代码。然后实现出基础的轮播功能效果，见截图：

首先，我们看一下这个代码首先先获取需要改变的元素content，然后在获取他的子元个数，接着就是声明定时器的初始值是null，然后声明index=0，接着就是开始onload方法，声明everyTime = 2000是设置轮播的间隔时间。然后在写一下自动轮播的方法，实现他的关键就是先清楚掉之前的定时器。然后重新开始执行一次定时器，最后就是设置每次轮播的宽度以及1.5s的速度轮播。

接下来看一下实现界面的效果功能：

这样就可以实现基础轮播图的功能效果。