Code and personal analysis:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
img {
width: 300px;
height: 300px;
}
/ * Set the style here just to make the picture does not appear the case of picture sizes when clicked, img can unify all set picture size page * /
</style>
</head>
<body>
<img src="./img/1.jpg" />
<! - Here is a point to note, the name of the picture to become coherent digital serial arrangement ->
<Button> Previous </ button>
<Button> Next </ button>
<script src="./js/jquery-3.4.1.js"></script>
<script>
$(function() {
var t = 1; // define a variable used for determining
// on a button to achieve
$ ( "Button"). Eq (0) .click (function () {// eq where () is the equivalent index, counting from zero, it is to get a first Button button
t + = 1; // I have here is short, and expand that t = t + 1, when clicking a second time, it is +1, the picture becomes a second, then click again on +1
if (t > 4) {
// if judgment here, it can be said to be acting as a for loop, I only have four pictures, when I click on the last one, that picture has come to my fifth chart does not have,
// put the value of t to 1 went to my first picture, similar to a for loop
t = 1
}
$("img").attr("src", "img/" + t + ".jpg")
// This is similar to a string of splicing, t is a dynamic data
})
// Next button to achieve
$("button").eq(1).click(function() {
t - = 1; // expand t = t-1
if (t < 1) {
t = 4
}
$("img").attr("src", "img/" + t + ".jpg")
})
// Under a realization on a button with the idea and logic is the same, is to determine the conditions in turn on a button
// It is noteworthy that eq () start value index value, as well as to determine the conditions clear rationale, then the picture is named
})
</script>
</body>
</html>
<-! Come together to learn front-end knowledge of it ->