一、手动轮播
1.首先你得准备几张规格，大小相同的图片(大于二张哦)，命名有规律一点就ok了，下面我的图片位置及命名：
2.下面直接上小demo的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>切换图片</title>
<style>
div{
border: 1px solid white;
width: 500px;
height: 350px;
margin: auto; /*页面居中对齐*/
text-align: center; /*文字居中*/
}
</style>
<script>
var i=1; //从第一张开始
function changeImg(){
i++; //var i++;这样不对，不能重新定义，只需++就好
document.getElementById("img1").src="../../img/"+i+".jpg"; //首先每个轮播图的命名都是有规律的，这样方便循环使用
if(i==3){ //图片循环完了进行初始化
i=0;
}
}
</script>
</head>
<body>
<div>
<!--我的这个demo是手动的，自动可以加自动函数-->
<input type="button" value="下一张" onclick="changeImg()"/>
<!--图片路径根据自己实际情况来，在这显示的写第一张就行，其他的手动时递增就ok,所以说这个图片命名要有规律些，这样好处理-->
<img src="../../img/1.jpg" width="100%" height="100%" id="img1" />
</div>
</body>
</html>
3.效果图：
总结：手动点击时才能改换图片；重要的还是当图片循环完需要初始化，及又要从第一张开始；如果要使自动轮播，需要调用函数setInterval("显示图片的函数",设置的间隔时间);当然这个是在当你加载这个页面的时候才触发的，虽然简单，哈哈，不足之处，请多指教！
二、自动轮播
前提是我调用了JS中的setInterval("显示图片的函数",设置的间隔时间)方法，用来做定时器，其实还可以用setTimeout()方法，这里不做细解释。下面来，不懂的可以查看JS的API
直接上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
//初始化方法
function init(){
/*setInterval功能用于循环，常常用于播放动画，或者时间显示。
是在指定的周期内。按照参数的函数名去运行一个函数，它有两种语法。
一种是基本用法，默认的语法。还有一种是专家模式的语法。*/
window.setInterval("changeImg()",3000); //或者setInterval("changeImg()",3000);都可以
}
//书写函数
var i=0;
function changeImg(){
i++;
//获取图片位置，并设置src属性值
document.getElementById("img1").src="../img/"+i+".jpg";
if(i==3){
i=0;
}
}
</script>
</head>
<body onload="init()">
<!--轮播图部分-->
<div id="">
<img src="../img/1.jpg" width="100%" id="img1"/>
</div>
</body>
</html>
效果图：
注：我是在前面手动的基础上加了定时器，这里只附上一张图，其他的你自己可以下个小demo测试一下 。
