<!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
>