要实现的功能大致为：
点击两边的切换按钮，可以按顺序切换不同的图片
具体操作如下：
一、布局html
1、添加一个div容器
2、添加一个轮播图img标签
3.添加两个按钮img标签
二、css样式设置
1、设置div容器的宽高分别为400px /200px，居中显示；
2、设置轮播图img标签的宽高分别为400px /200px；
3、将按钮img标签分别设置到左右两侧，需要用到float属性和position属性。position属性这里设置为relative。再使用right/left、bottom属性来调整按钮位置；
三、js切换效果
1、构造一个数组imgarr来存储需要切换的图片地址src信息；
2、构造nextimg函数来实现切换next图片（向后切换）
这里注意，需要定义一个全局值i=0;
向后切换的效果分析：点击后图片地址会变化，且是前一个地址+1的形式。同时需要判断是否是最后一张图片。
所以： function nextimg(){
i++;
if(i>=4){i=0;}
img.src=imgsrc[i];
}
3、构造previmg函数来实现切换prev图片（向前切换）
向前切换的效果分析：点击后图片地址会变化，且是前一个地址-1的形式。同时需要判断是否是第一张图片。
所以：
function previmg(){
i--;
if(i<=0){i=3;}
img.src=imgsrc[i];
}
到此为止，效果就实现了。
全部代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.main{
width: 400px;
height: 200px;
margin: 30px auto;
overflow: hidden;
}
#prev{
position: relative;
float: left;
left: 10px;
bottom:120px;
}
#next{
position: relative;
float: right;
right: 10px;
bottom:120px;
}
</style>
</head>
<body>
<div class="main">
<img src="img/01.png" alt="" imgid="0" id="imgon"/>
<img src="img/u1.png" alt="" id="prev" onclick="previmg()"/>
<img src="img/u0.png" alt="" id="next" onclick="nextimg()"/>
</div>
<script type="text/javascript">
imgsrc=new Array();
imgsrc[0]="img/01.png";
imgsrc[1]="img/02.png";
imgsrc[2]="img/03.png";
imgsrc[3]="img/04.png";
var i=0;
var img=document.getElementById("imgon");
function nextimg(){
i++;
if(i>=4){i=0;}
img.src=imgsrc[i];
}
function previmg(){
i--;
if(i<=0){i=3;}
img.src=imgsrc[i];
}
</script>
</body>
</html>