<div style="display: inline-block;">
<div id="imgview"></div>
<div style="text-align: center;">
<button onclick="up();">上一页</button>
<button onclick="first();">最前页</button>
<input id="pageinput" type="number"style="width:50px"/>页
<button onclick="go();">GO</button>
<button onclick="last();">最后页</button>
<button onclick="down();">下一页</button>
</div>
</div>
<script>
//图片标签数组
let images = [
'<img height="400" width="500" src="https://img-bss.csdnimg.cn/1640165743799.png" alt="Image">',
'<img src="1.jpg" alt="Image">',
'<img src="2.jpg" alt="Image">',
'<img src="3.jpg" alt="Image">',
'<img src="4.jpg" alt="Image">',
'<img src="5.jpg" alt="Image">',
'<img src="6.jpg" alt="Image">',
'<img src="7.jpg" alt="Image">',
'<img src="8" alt="Image">',
'<img src="9.jpg" alt="Image">'
];
let imgview = document.getElementById("imgview");//图片显示对象
let pageinput = document.getElementById("pageinput");//跳转页数对象
let page = 0;
pagechange(page);
function pagechange(p){
imgview.innerHTML = images[p];
pageinput.value = p;
}
//上一页
function up(){
if(page>0){
page--;
pagechange(page);
}
}
//最前页
function first(){
page = 0;
pagechange(page);
}
//跳转
function go(){
let count = pageinput.value;
page = count;
if(count<0){
page=0;
}
if(count>=images.length-1){
page = images.length-1;
}
pagechange(page);
}
//最后页
function last(){
page = images.length-1;
pagechange(page);
}
//下一页
function down(){
if(page<images.length-1){
page++;
pagechange(page);
}
}
</script>
07-01
2697

06-05
885
