<!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;
}
/* 这里设置样式只是为了使图片在点击时不会出现图片大小不一的情况,img可以统一设置页面中所有的图片大小 */
</style>
</head>
<body>
<img src="./img/1.jpg" />
<!-- 这里有一个要注意的点，图片的名称要变成连贯的数字序号排列 -->
<button>上一张</button>
<button>下一张</button>
<script src="./js/jquery-3.4.1.js"></script>
<script>
$(function() {
var t = 1; //定义一个变量用来进行判断
//上一张的按钮实现
$("button").eq(0).click(function() { //这里的eq()是相当于是索引，从0开始计数，就是获取第一个button按钮
t += 1; //我这里是简写了，展开就是 t=t+1 ,当点击第二次的时候，就+1，把图片变成第二张，再点击，就再+1
if (t > 4) {
//这里的if判断，也可以说是充当一个for循环,我只有4张图片，当我点击到最后一张时，就是说图片已经到我没有的第五张图时，
//就把t的值改为 1 就到了我的第一张图片，类似于一个for循环
t = 1
}
$("img").attr("src", "img/" + t + ".jpg")
//这里是一个类似字符串的拼接，t 是一个动态的数据
})
//下一张的按钮实现
$("button").eq(1).click(function() {
t -= 1; //展开 t=t-1
if (t < 1) {
t = 4
}
$("img").attr("src", "img/" + t + ".jpg")
})
//下一张按钮的实现与上一张的思路和逻辑是一样，判断就是把上一张按钮的条件反过来
//值得注意的是eq()的索引值的起始值，还有把判断条件理清楚，然后就是图片的命名
})
</script>
</body>
</html>
<!-- 一起加油努力学习前端知识吧 -->
