這篇文章跟大家分享的是關於JavaScript利用DOM如何實現圖片切換？ ，內容很不錯，有需要的朋友可以參考一下，希望可以幫助大家。
今天開始學習DOM操作,下面寫一個小案例來鞏固下知識點.
DOM: document object model (文檔對像模型)
根據id 取得頁面元素: 如: var xx = document.getElementById("id");
根據標籤取得元素: 如: var xx = document .getElementsByTagName("p");
src="imgs/1.png"/><br> <button id="btn1" type="button" value="
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
#outer {
width: 500px;
/*设置上边距50px 水平居中*/
margin: 50px auto;
/*设置边框*/
padding: 10px;
background-color: greenyellow;
/*设置文本居中*/
text-align: center;
}
img {
width: 500px;
}
</style>
<script>
//btn 为按钮id clickEventFunction 为点击后执行的操作函数
function addClick(btn, clickEventFunction) {
var myButton = document.getElementById(btn);
myButton.onclick = clickEventFunction;
};
window.onload = function () {
(function () {
var pics = ["imgs/1.png",
"imgs/2.png",
"imgs/3.png"];
var index = 0;
showPicNum(index);
var img = document.getElementsByTagName("img")[0];
// var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
addClick("btn1", function () {
index--;
if (index <= -1) {
index = pics.length - 1;
}
console.log(index + " ----- ");
img.src = pics[index];
showPicNum(index);
});
addClick("btn2", function () {
index++;
if (index >= pics.length) {
index = 0;
}
console.log(index + " ++++++++ ");
img.src = pics[index];
showPicNum(index);
});
//
// btn1.onclick = function () {
// index --;
// if(index <= -1){
// index = pics.length - 1;
// }
// console.log(index + " ----- ");
// img.src = pics[index];
// showPicNum(index);
// };
// btn2.onclick = function () {
// index ++;
// if(index >= pics.length){
// index = 0;
// }
// console.log(index + " ++++++++ ");
// img.src = pics[index];
// showPicNum(index);
// };
console.log(index);
/**
* 展示当前图片为第几张
* @param index 当前图片索引
*/
function showPicNum(index) {
var descrs = document.getElementById("discs");
descrs.innerText = "一共" + pics.length + "张图片,当前第" + ++index + "张";
}
}())
};
</script>
</head>
<body>
<div id="outer">
<p id="discs"></p>
<img src="imgs/1.png"/><br>
<button id="btn1" type="button" value="上一张">上一张</button>
<button id="btn2" type="button" value="下一张">下一张</button>
</div>
</body>
</html>文件目錄:
r ：
# 
以上是JavaScript利用DOM如何實現圖片切換？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
