圖片的上下頁切換
<script type="text/javascript">
window.onload = function(){
var prev = document.getElementById("prev");
var next = document.getElementById("next");
// alert("上一張");
// 獲取到一個陣列 我們可以確定只有一個img標簽[0]獲取第一個img標簽
var img = document.getElementsByTagName("img")[0];
var imgArray = ["image/01.jpg","image/02.jpg","image/03.jpg","image/04.jpg","image/05.jpg"];
// 創建一個變數,來保存當前正在顯示的圖片的索引
var index = 0;
// 設定提示文字
var info = document.getElementById("info");
info.innerHTML = "一共"+imgArray.length+"張圖片 當前第"+(index + 1)+"張";
prev.onclick = function(){
/*
切換到上一張,索引自減
*/
index--;
if(index < 0){
index = imgArray.length - 1;
}
img.src = imgArray[index];
info.innerHTML = "一共"+imgArray.length+"張圖片 當前第"+(index + 1)+"張";
};
next.onclick = function(){
// alert("下一張");
/*
切換到下一張,索引自增
*/
index++;
if(index > imgArray.length - 1){
index = 0;
}
img.src = imgArray[index];
info.innerHTML = "一共"+imgArray.length+"張圖片 當前第"+(index + 1)+"張";
};
}
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/292363.html
標籤：其他
上一篇：Node.js 簡介
下一篇：JavaScript 模塊化