<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>图片切换</title>
<style>
.box img {width:300px;height:300px;}
.box {margin:0 auto;position:relative;width:300px;}
.box input {width:70px;font-size:12px;background-color:#8E8E8E;border:none;border-radius:4px;cursor:pointer;color:white;}
.box #p {width:300px;height:30px;line-height:30px;font-size:16px;color:black;background-color:white;opacity:0.5;position:absolute;bottom:0;top:254px;text-align:center;}
form {text-align:center;}
.box #num {text-align:center;font-size:14px;color:gray;margin-bottom:5px;margin-top:5px;}
.box .btn1 {margin-bottom:10px;margin-top:10px;}
</style>
</head>
<body>
<div class="box">
<img src="img/1a.jpg" id="pic">
<p id="num">1/5</p>
<form>
<input type="button" value="上一张" id="forward">
<input type="button" value="下一张" id="next">
</form>
<p id="p">这是第一张图片</p>
</div>
<script>
var next=document.getElementById("next");
var forward=document.getElementById("forward");
var pic=document.getElementById("pic");
var num=document.getElementById("num");
var p=document.getElementById("p");
var arr=["img/1a.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"];
var p1=["这是第一张图片","这是第二张图片","这是第三张图片","这是第四张图片","这是第五张图片"];
var n=0;
next.onclick=function(){
n++;
if(n>arr.length-1){
n=0;
}
change();
};
forward.onclick=function(){
n--;
if(n<0){
n=arr.length-1
}
change();
};
function change(){
pic.src=arr[n];
p.innerHTML=p1[n];
num.innerHTML=n+1 + "/" + arr.length;
}
</script>
</body>
</html>