标签：lis listener tle add sele UNC image document col
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数组</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
section{
margin:80px auto;
width: 400px;
height: 370px;
overflow: hidden;
text-align: center;
background: #a7a7a7;
transition: all 1s;
}
p{
display: block;
width: 400px;
height: 25px;
margin: 5px 0;
background: #000;
color: white;
line-height: 25px;
}
nav{
background-size: 100% 100%;
width: 380px;
height: 300px;
margin: 0 auto;
transition: all 0.25s;
}
img{
width: 380px;
height: 300px;
}
button{
width: 25px;
height: 40px;
font-size: 20px;
margin-top: 120px;
}
button:hover nav,img{
opacity: 1;
}
.a1{
float: left;
}
.a2{
float: right;
}
</style>
<body>
<section>
<p class="p1"></p>
<nav class="bj">
<button class="a1"><</button>
<button class="a2">></button>
</nav>
<p class="p2"></p>
</section>
<script>
function wzzh(a){
let arr2=["一","二","三","四","五","六","七","八","九","十"];
if (a<10)
return arr2[a];
}
function wenben(b){return arr3[b];}
let a1=document.querySelector(".a1");
let a2=document.querySelector(".a2");
let bj=document.querySelector(".bj");
let p1=document.querySelector(".p1");
let p2=document.querySelector(".p2");
let arr=[‘img/1.png‘,‘img/2.png‘,‘img/3.png‘,‘img/4.png‘];
//图片的路径
let arr3=[
"XXXXXXXXXXXXXX",
"YYYYYYYYYYYYYY",
"ZZZZZZZZZZZZZZ",
"AAAAAAAAAAAAAA"];
let count=0;
let wz,gy;
bj.style.backgroundImage="url("+arr[count]+")";
p1.innerHTML="这是第一张图片，一共有四张图片";
p2.innerHTML=wenben(count);
a2.addEventListener("click",function a1() {
count++;
if (count===arr.length)
count=0;
bj.style.backgroundImage="url("+arr[count]+")";
wz=wzzh(count);
gy=wzzh(arr.length-1);
p1.innerHTML="这是第"+wz+"张图片，一共有"+gy+"张图片";
p2.innerHTML=wenben(count);
});
a1.addEventListener("click",function () {
count--;
if (count===-1)
count=arr.length-1;
bj.style.backgroundImage="url("+arr[count]+")";
wz=wzzh(count);
gy=wzzh(arr.length-1);
p1.innerHTML="这是第"+wz+"张图片，一共有"+gy+"张图片";
p2.innerHTML=wenben(count);
});
</script>
</body>
</html>标签：lis listener tle add sele UNC image document col
原文地址：https://blog.51cto.com/14893161/2546312
