//获取按钮
var btn=document.getElementById("btn");
var btn2 = document.getElementById("btn2");
var img=document.getElementsByTagName("img")[0];
var p=document.getElementsByTagName("p")[0];
var arr=["../img/1.png","../img/2.png","../img/3.png","../img/4.png","../img/5.png"];
var index=0;
btn.οnclick=function(){
index--;
if(index<0){
index=arr.length-1;
}
img.src=arr[index];
p.innerHTML="一共有"+arr.length+"张图片"+"当前是第"+(index+1)+"张";
}
btn2.οnclick=function(){
index++;
if(index>arr.length-1){
index=0;
}
img.src=arr[index];
p.innerHTML="一共有"+arr.length+"张图片"+"当前是第"+(index+1)+"张";
}
《--这是body里的内容--》
<body>
<div>
<p>一共有5张图片，当前是第1页</p>
<img src="../img/1.png" alt="">
<button id="btn">上一页</button>
<button id="btn2">下一页</button>
</div>
</body>
《--这是style样式--》
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 500px;
height: 440px;
background-color: aqua;
text-align: center;
margin: 0 auto;
}
img{
width: 400px;
height: 300px;
margin: 30px;
}
</style>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
