大家在逛网页的时候，经常会看到轮播图的出现。尤其是电商网页，一般主页就是一个大的轮播图。那么这种轮播图要怎么实现呢，这个实现方法是多种多样的，具体要看自己怎么喜欢。
先上效果图，还是蜡笔小新主题的，不过这次不需要自己移动鼠标：
这个还是比较简单的一种，没有什么花样。
接下来就来带大家完成这个轮播图，先是html代码：
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自动轮播图</title>
</head>
<style>
*{
margin: 0px;
padding: 0px;
}
#image{
margin: 10px auto;
width: 1080px;
display: block;
}
</style>
<body>
<img id="image" src="img1.jpg">
</body>
</html>代码比较简单，主体（body）里面就一个img标签，上面的样式也就是设置居中。接下来讲一下JavaScript代码，具体代码的作用我就写注释里面了：
代码语言：javascript复制<script type="text/javascript">
window.onload = function () {
//创建图片路径数组
var imgs = Array("img1.jpg", "img2.jpg", "img3.jpg", "img4.jpg");
//获取图片元素
var image = document.getElementById("image");
//计算，用来辅助轮播
var i = 0;
//设置定时器，每50毫秒运行一次
setInterval(function () {
//判断是否越界，为越界就i 进入下一张图片
if(i <= 3){
//改变图片路径实现图片切换
image.src = imgs[i];
i ;
}else{
//如果下标越界了，就把i设置为0，从第一张图片从新开始
i = 0;
}
}, 500);
}
</script>这里主要就是用到定时器函数setInterval(method, time)；就是传入要运行的方法和运行时间间隔。
目录结构就是这样，其中img1~img4就是轮播的图片，而上面JS代码中的imgs数组也是这四张图片的路径。完整的代码如下：
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script type="text/javascript">
window.onload = function () {
var imgs = Array("img1.jpg", "img2.jpg", "img3.jpg", "img4.jpg");
var image = document.getElementById("image");
var i = 0;
setInterval(function () {
if(i <= 3){
image.src = imgs[i];
i ;
}else{
i = 0;
}
}, 500);
}
</script>
<style>
*{
margin: 0px;
padding: 0px;
}
#image{
margin: 10px auto;
width: 1080px;
display: block;
}
</style>
<body>
<img id="image" src="img1.jpg">
</body>
</html>
