使⽤jQuery做左右点击切换图⽚的⼿动图⽚轮播效果代码和个⼈解析：
<!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>  // 引⼊jQuery⽂件
<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-1jquery在线图片
if (t < 1) {
t = 4
}
$("img").attr("src", "img/" + t + ".jpg")
})
//下⼀张按钮的实现与上⼀张的思路和逻辑是⼀样，判断就是把上⼀张按钮的条件反过来
//值得注意的是eq()的索引值的起始值，还有把判断条件理清楚，然后就是图⽚的命名
})
</script>
</body>
</html>
<!-- ⼀起加油努⼒学习前端知识吧 -->

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。