<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图片切换</title>
</head>
<body>
<img src="3885730_124701000519_2.jpg" width="200" alt = "" id = "img_id"><!--页面加图片-->
<button onClick="back()">上一张</button><!-- 通过按钮调用方法-->
<button onClick="next()">下一张</button>
</body>
</html>
<script type = "text/javascript">
var i = 0;
var b = 0;
var arr = ["3885730_124701000519_2.jpg","IMG_0511.JPG","IMG_0512.JPG"];//创建一个图片路径的数组，一般用相对路径
var img_1 = document.getElementById("img_id");//获得对象
function back(){//上一张图片的实现方法
if(b >= arr.length-1){
b =0;
img_1.src = arr[b];//进行赋值
console.log(img_1.src);
}else{
i = 2 - b;
img_1.src = arr[i];
b++;//进行自加一
console.log(img_1.src);
}
}
function next(){//下一张图片的实现方法
if(i >= arr.length-1){
i = 0;
img_1.src = arr[i];
console.log(img_1.src);
}else{
i++;
img_1.src = arr[i];
console.log(img_1.src);
}
}
</script>