利用DOM进行照片的切换
生活随笔
收集整理的這篇文章主要介紹了
利用DOM进行照片的切换
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
上周學習了DOM,學習了怎樣進行圖片的切換，下面是詳細代碼
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}#one{width: 500px;text-align: center;margin: 50px auto;background-color: greenyellow;padding: 10px;/*font-size: 30px;*/}img{width: 500px;height: 500px;}</style><script type="text/javascript">window.onload = function(){//獲取prev標簽var prev = document.getElementById("prev");//獲取next標簽var next = document.getElementById("next");//獲取img標簽var img = document.getElementsByTagName("img")[0];/** 要切換圖片就是修改img標簽的src屬性 *///將所有的img放在一個數組var imgArr = ["../img/3_03.jpg" , "../img/3_04.jpg" , "../img/3_05.jpg" , "../img/3_06.jpg"];//創建一個變量，來保存當前正在顯示圖片的索引var index = 0;//獲取id為info的p元素var info = document.getElementById("info");//設置提示文字info.innerHTML = "一共"+(imgArr.length)+"張圖片，當前第"+(index+1)+"張";//為prev綁定單機函數prev.onclick = function (){/** 切換上一張，索引自減*/index--;if(index<0){index = imgArr.length-1;}img.src = imgArr[index];info.innerHTML = "一共"+(imgArr.length)+"張圖片，當前第"+(index+1)+"張";};//為next綁定單機函數next.onclick = function(){/** 切換下一張，索引自增*/index++if(index>imgArr.length-1){index = 0;}img.src=imgArr[index];info.innerHTML = "一共"+(imgArr.length)+"張圖片，當前第"+(index+1)+"張";};}</script></head><body><div id="one"><p id = info></p><img src="../img/3_03.jpg" alt="雪人"/><button id = "prev">上一張</button><button id = "next">下一張</button></div></body> </html>?
轉載于:https://www.cnblogs.com/black-lm/p/9352894.html
總結
以上是生活随笔為你收集整理的利用DOM进行照片的切换的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JavaScript中创建对象的方法
- 下一篇： js数组基础