當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
利用JavaScript实现在网页上图片上一张下一张的操作
生活随笔
收集整理的這篇文章主要介紹了
利用JavaScript实现在网页上图片上一张下一张的操作
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!--實現代碼如下-->
<!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;//設置角標window.onload =function(){//匿名函數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实现在网页上图片上一张下一张的操作的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 我的核心技术都是从哪里学到的？如何提高成
- 下一篇： Object/Relation Mapp