JavaScript는 어떻게 DOM을 사용하여 이미지를 전환합니까?
- 不言원래의
- 2018-07-21 09:54:012435검색
이 기사에서는 JavaScript를 사용하여 DOM을 사용하여 이미지를 전환하는 방법을 공유합니까? , 내용이 매우 좋고 도움이 필요한 친구들이 참고할 수 있으며 모든 사람에게 도움이 될 수 있기를 바랍니다.
오늘 DOM 작업 학습을 시작합니다. 지식 포인트를 통합하기 위한 작은 사례를 작성해 보겠습니다.
DOM: 문서 객체 모델(document object model)
#🎜🎜 #id을 기준으로 페이지 요소 가져오기: 예: var xx = document.getElementById("id");
based # 🎜🎜# 태그 요소 가져오기: 예: 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>
문서 디렉터리:
# 🎜🎜# # 🎜🎜#
효과는 다음과 같습니다.
🎜🎜# 
JS 범위 및 객체 지향에 대한 추가 분석
js가 이미지를 업로드하고 압축하는 방법을 구현하는 방법
#🎜🎜 #
위 내용은 JavaScript는 어떻게 DOM을 사용하여 이미지를 전환합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!