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