基础轮播图
下面我们使用Visual Studio这个软件来写一个小案例,我们可以用写一个简单的方法,就是实现基础的轮播图的功能效果。
那么这个代码要怎么写呢,首先我们需要先在界面上写一下的Html的代码,我们来看一下界面的代码是什么。
我们先看一下Html页面的截图:
在截图中我们可以看到界面的代码就是,在一个大的div里面写了一个div嵌套着4张img图片。接着写完了html的代码我们就需要去看一下style给他设置的属性值。看一下style属性代码截图:
从上面可以看到,给这个标签写两个标签的属性代码,接着定义好界面的属性代码我们接着就需要写一下代码。然后实现出基础的轮播功能效果,见截图:
首先,我们看一下这个代码首先先获取需要改变的元素content,然后在获取他的子元个数,接着就是声明定时器的初始值是null,然后声明index=0,接着就是开始onload方法,声明everyTime = 2000是设置轮播的间隔时间。然后在写一下自动轮播的方法,实现他的关键就是先清楚掉之前的定时器。然后重新开始执行一次定时器,最后就是设置每次轮播的宽度以及1.5s的速度轮播。
接下来看一下实现界面的效果功能:
这样就可以实现基础轮播图的功能效果。