<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
li{
width: 1000px;
background-color: bisque;
margin: 20px auto;
}
#photo{
width: 100%;
}
ul{
width: 100%;
margin: 0 auto;
text-align: center; /*文本水平中置标签*/
}
</style>
</head>
<body>
<script>
window.onload=function(){
let prev=document.getElementById('prev');
let next=document.getElementById('next');
let photo=document.getElementById('photo');
let index=0;
let photoArr=["./photo/01.jpg","photo/02.jpg","photo/03.jpg","photo/04.jpg","photo/05.jpg"];
var info=document.getElementById("info");
console.log(photoArr[0]);
prev.onclick=function(){
index--; //变量在函数中的作用域就在此函数中，出了函数变量值会归零
if(index<0){
index=photoArr.length-1;
}
photo.src=photoArr[index];
}
next.onclick=function(){
index++;
if(index>photoArr.length){
index=0;
}
photo.src=photoArr[index];
console.log(index);
}
info.innerHTML="一共"+photoArr.length+"张，现在是第"+(1+index)+"张";
console.log(index);
}
</script>
<div>
<li>
<ul>
<button id="prev">上一张</button>
</ul>
<ul>
<button id="next">下一张</button>
</ul>
<ul>
<img id="photo" src="./photo/01.jpg" alt="van gogh">
</ul>
<ul>
<p id="info"></p>
</ul>
</li>
</div>
</body>
</html>