I've always wanted to start blogging, but I don't feel like I'm good enough. Today I want to understand that I always need to record my progress to see my growth.
Today is the review of dom. I found it hard to learn dom before. dom is actually to turn all the elements in the page into an object and use their relationship model to find the object. After finding the object, we can make the object (referring to the teacher), which is so simple;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
//window.onload allows the page to be executed after loading
window.onload = function(){
//Get button (find object)
var prev=document.getElementById("prev");
var next=document.getElementById("next");
//Get pictures
var img = document.getElementsByTagName("img")[0];
//How many pages are displayed
var page = document.getElementById("page");
//Put all the pictures in an array for operation
var imgArr = ["img/1.jpg","img/2.jpg","img/3.jpg"];
var index = 0;
//Events by clicking the button
prev.onclick = function(){
index --;
if(index < 0){
index = imgArr.length -1;
}
page.innerHTML = index + 1;
img.src = imgArr[index];
}
next.onclick = function(){
index ++;
if(index > imgArr.length-1){
index = 0;
}
page.innerHTML = index + 1;
img.src = imgArr[index];
}
}
</script>
<style>
/* Clear original style*/
*{
margin: 0;
padding: 0;
}
#div1{
padding: 10px;
margin: 50px auto;
background-color: antiquewhite;
text-align: center;
}
</style>
</head>
<body>
<div id="div1">
<img src="img/1.jpg">
<div>
<button id="prev"><<Previous page</button>
//Page < span id = "page" > 1 < / span >
<button id= "next">next page>></button>
</div>
</div>
</body>
</html>
The effect is as follows. It can be switched and the number of pages will be updated. The style is not very beautiful. Next time, I will change it
