我们在浏览网页的时候是不是看到很多网页中的图片会有变化，那么今天我们也来学习下怎么通过html5来实现图片轮播，下面是图片轮播图做法解析！
1.首先我们在开发工具中新建一个 html 文件，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轮播图</title>
</head>
<body>
</body>
</html>
2.在完成之后呢，我们需要在 html 的主体部分添加一个div标签，设置盒子的宽高以便用来放入图片，并且在div标签中在加入img标签，在将需要的图片路径输入在img标签中即可，代码如下：
<html>
<head>
<meta charset="utf-8">
<title>轮播图</title>
</head>
<body>
<div>
<img src="img/1.png" />
</div>
</body>
</html>
3.完成之后，我们使用内嵌式方法设置样式在头部添加我们需要的css样式，从而实现控制效果。代码如下：
<html>
<head>
<meta charset="utf-8">
<title>轮播图</title>
<script type="text/javascript" src="js/轮播图.js"></script>
<style>
img{
width: 600px;
height: 450px;
}
</style>
</head>
<body>
<div >
<img src="img/1.png" />
</div>
</body>
</html>
4.完成上面步骤之后我们可以在预览页面看到我们的图片效果，那么接下来我们在body标签中添加 js 事件onload，也就是当我们在加载该页面的时候，通过调用onload的值的对应的方法，然后我们再为img添加一个id属性，这样可以方便我们下一步的操作！代码如下：
<html>
<head>
<meta charset="utf-8">
<title>轮播图</title>
<script type="text/javascript" src="js/轮播图.js"></script>
<style>
img{width: 600px;height: 450px;}
</style>
</head>
<body onload="init()">
<div >
<img id="myimg" src="img/1.png" />
</div>
</body>
</html>
5.完成之后呢，我们新建一个 .js 文件添加如下代码（在我们的开发中应该新建一个新的 .js 文件从方便开发），从而完成我们需要的轮播的功能。在代码中setInterval(code,time);的两个参数都是必须的要填写的，其中code是指代执行的方法或者代码串，time是用来表示图片直接的时间间隔（以毫秒计，1000就是1秒，根据需要来调整）。其中if语句中i的值跟图片的数量和命名有关。代码如下：
function init(){
window.setInterval(changeImg,1000)
}
var pathArr = new Array(
"img/1.png",
"img/2.png"
);
var index = 0;
function changeImg(){
myimg = document.getElementById("myimg");
index ++;
if(index>=pathArr.length){
index = 0;
}
myimg.src = pathArr[index];
}
通过以上步骤之后我们就可以得到一个喜欢的轮播图了，今天的分享就到这里了，其实还有很多的方法我们都可以在zijiebao中进行方面的学习和了解。
