使用js制作一个图片切换

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

使用js制作一个图片切换

上一篇:【Apache Flink 入门教程】7. 状态管理与容错机制


下一篇:分布式日志收集器 - Flume