<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
#outer{
width: 500px;
height: 300px;
/*height: 100px;*/
margin: 50px auto;
padding: 10px;
background-color: blueviolet;
text-align: center;/*文本居中*/
}
#img1{
height: 250px;
width: 480px;
}
</style>
<script>
var np=0;
window.onload=function(){
var imgarr=["1.jpg","2.jpg","3.jpg","4.jpg"];
var l=document.getElementById("last");
var n=document.getElementById("next");
var img=document.getElementById("img1");
var info=document.getElementById("ppp");
l.onclick=function(){
if(np===0){
np=3;
}else{
np=np-1;
}
img.src=imgarr[np];
info.innerHTML="总共四张图片，当前是第"+(np+1)+"张图片";
}
n.onclick=function(){
np=(np+1)%4;
img.src=imgarr[np];
info.innerHTML="总共四张图片，当前是第"+(np+1)+"张图片";
}
}
</script>
</head>
<body>
<div id="outer">
<p id="ppp">一共四张图片，当前是第1张</p>
<img src="1.jpg" alt="P1" id="img1">
<button id="last">上一张</button>
<button id="next">下一张</button>
</div>
</body>
</html>
