當(dāng)前位置：首頁(yè) >

利用JavaScript实现在网页上图片上一张下一张的操作

發(fā)布時(shí)間：2023/12/10 58 豆豆

生活随笔收集整理的這篇文章主要介紹了利用JavaScript实现在网页上图片上一张下一张的操作小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title><script>var imageName =new Array("photoA.jpg","photoB.jpg","photoc.jpg","photod.jpg","photoe.jpg","photof.jpg");var foot =1;//設(shè)置角標(biāo)window.onload =function(){//匿名函數(shù)var pbtu =document.getElementById("previousButton");var nbtu =document.getElementById("nextButton");var img =document.getElementById("img");nbtu.addEventListener("click",function(){if(foot>=imageName.length){foot =0;}img.src = "images/" + imageName[foot++];},false);pbtu.addEventListener("click",function(){if(foot<=0){foot =imageName.length-1;}img.src = "images/" + imageName[foot--];},false);}</script> </head> <body> <scan id="info"><img id="img" src="images/photoa.jpg" height="200px" > </scan> <div><button id="previousButton" type="button" >上一張</button><button id="nextButton" type="button" value="">下一張</button> </div> </body> </html>

以上是生活随笔為你收集整理的利用JavaScript实现在网页上图片上一张下一张的操作的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。