要实现的功能大致为：
点击两边的切换按钮，可以按顺序切换不同的图片
具体操作如下：
一、布局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];
}
到此为止，效果就实现了。
全部代码如下：
.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;
}
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];
}
如果觉得《html原生轮播图的实现 使用原生js实现点击切换图片（轮播图）效果》对你有帮助，请点赞、收藏，并留下你的观点哦！
