<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>轮播原理图</title>
</head>
<body>
<div>
<!--添加两个按钮和默认出现的图-->
<button onclick="prev()"> 上一个 </button>
<img id="slider" src="image/1.jpg" />
<button onclick="next()"> 下一个 </button>
</div>
<!--JS代码-->
<script>
<!--定义一个数组放入轮播的图片-->
var images = [
"image/1.jpg",
"image/2.jpg",
"image/3.jpg"
];
<!--定义一个开始数0>
var num = 0;
<!下一个按钮点击事件-->
function next() {
var slider = document.getElementById("slider");
num++;
if(num >= images.length) { <!--如果出现num大于等于数组长度则返回0（这里注意数组长度是从 1 计算，而数组是从 0 开始计算）-->
num = 0;
}
slider.src = images[num]; <!--更改src属性-->
}
<!--上一个按钮点击事件-->
function prev() {
var slider = document.getElementById("slider");
num--;
if(num < 0) { <!--如果出现num小于0，则返回数组长度-1（这里注意数组长度是从 1 计算，而数组是从 0 开始计算）-->
num = images.length-1;
}
slider.src = images[num]; <!--更改src属性-->
}
</script>
</body>
</html>