當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript实现单击上一张和下一张按钮切换图片
生活随笔
收集整理的這篇文章主要介紹了
JavaScript实现单击上一张和下一张按钮切换图片
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script type="text/javascript">window.onload = function () {//獲取信息顯示ID infovar info = document.getElementById("info");//獲取圖片ID imagesvar images = document.getElementById("images");var path = ["../images/5.png","../images/6.png","../images/7.png","../images/8.png"];//定義圖片索引var index = 0;//獲取單擊按鈕標簽 buttonvar bt = document.getElementsByTagName("button");//上一張功能實現bt[0].onclick = function () {index--;//判斷index是否小于0if(index < 0){index = path.length - 1;}images.src = path[index];info.innerHTML ="一共 "+path.length+" 張圖片，當前是第 "+(index+1)+" 張，"+"當前圖片的文件名稱是"+path[index];};//下一張功能實現bt[1].onclick = function () {index++;if(index > path.length - 1){index = 0;}//切換圖片就是修改img的src屬性//要修改一個元素的屬性 元素.屬性 = 屬性值images.src = path[index];info.innerHTML ="一共 "+path.length+" 張圖片，當前是第 "+(index+1)+" 張，"+"當前圖片的文件名稱是"+path[index];};};
</script>
<div><p id="info"></p><p><img id="images" src="../images/5.png" width="200px"></p><p><button value="上一張" style="width:auto;height: auto;">上一張</button><button value="下一張" style="width: auto;height: auto;">下一張</button></p>
</div></body>
</html>
總結
以上是生活随笔為你收集整理的JavaScript实现单击上一张和下一张按钮切换图片的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 这段时
- 下一篇： JS简单实现图片上一张下一张操作