Before due to Ben Wang's carelessness, resulting in the first phase of the code is missing, I'm sorry to everyone, here I put the code in full release
<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<title> Untitled Document </title>
<style type= "Text/css" >
#btn {margin-top:200px;}
p{margin:0; text-align:center; color: #000; Background-color:rgba (255,255,255,0.4); width:490px}
#pic {position:relative; width:490px; height:170px;}
P:nth-of-type (1) {position:absolute; top:0; left:0;}
P:nth-of-type (2) {position:absolute; bottom:0; left:0;}
Input.active{background-color:yellow; color:red;}
</style>
<body>
<div id= "BTN" ></div>
<div id= "pic" >
<p></p>
<p></p>
</div>
<script>
var arr1 = ["Figure 1", "Figure 2", "Figure 3", "Figure 4"];
var arr2 = ["Img/201512181051305.jpg", "img/201512181051307.jpg", "img/201512181051308.jpg", "img/201512181051309". JPG "];
var odiv = document.getElementById ("btn");
var AP = document.getElementsByTagName ("P");
var oimg = document.getelementsbytagname ("img") [0];
ap[0].innerhtml = "1/" +arr2.length;
ap[1].innerhtml = arr1[0];
OIMG.SRC = arr2[0];
var str = "";
for (Var i=0;i<arr2.length;i++) {
str + = "<input type= ' button ' value= '" + (i+1) + "'/>";
}
odiv.innerhtml = str;
var abtn = odiv.getelementsbytagname ("input");
Abtn[0].classname = "active";
for (Var i=0;i<arr2.length;i++) {
Abtn[i].index = i;
Abtn[i].onclick = function () {
ap[0].innerhtml = (this.index+1) + "/" +arr2.length;
ap[1].innerhtml = Arr1[this.index];
OIMG.SRC = Arr2[this.index];
for (Var j=0;j<arr2.length;j++) {
Abtn[j].classname = "";
}
This.classname = "active";
}
}
</script>
</body>
Web front end of the day to learn a little JS knowledge