总的来说，就是每一次点击按钮，就改变ul.style.left的值。
当点击下一张，图片的轮播到最后一张后，ul.style.left的值要变回0，也就是从第一张开始。
同理，当点击上一张，图片轮播到第一张的时候，要从最后一张开始轮播，也就是要把 ul.style.left的值设置为最后一张时候的值。
解决函数节流的问题：不能鼠标每一次点击按钮，都生效一次点击的逻辑，可以设置一个状态，默认为false,（var lock = false）当开始执行的时候，把状态设置为true,这时候，点击鼠标也不会生效。
使用settimeout来设置什么时候把lock又设置为false
在两张图片切换的时候，配合过渡属性来操作。
ul.style.transition="left 0.5s ease 0
具体代码和注释如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.carousel {
width: 650px;
height: 360px;
border: 1px solid #000;
margin: 50px auto;
position: relative;
/* 超出设置宽度的部分就会隐藏 */
/* overflow: hidden; */
}
.carousel ul {
list-style: none;
width: 6000px;
position: relative;
left: 0px;
/* left发生变化的时候，设置过渡效果， */
transition: left 0.5s ease 0s;
}
.carousel ul li {
float: left;
}
.carousel .leftbtn {
position: absolute;
left: 20px;
top: 50%;
margin-top: -25px;
width: 50px;
height: 50px;
background-color: rgb(28, 180, 226);
border-radius: 50%;
}
.carousel .rightbtn {
position: absolute;
right: 20px;
top: 50%;
margin-top: -25px;
width: 50px;
height: 50px;
background-color: rgb(28, 180, 226);
border-radius: 50%;
}
</style>
</head>
<body>
<div class="carousel">
<ul id="list">
<li><img src="images/beijing/0.jpg" alt="" /></li>
<li><img src="images/beijing/1.jpg" alt="" /></li>
<li><img src="images/beijing/2.jpg" alt="" /></li>
<li><img src="images/beijing/3.jpg" alt="" /></li>
<li><img src="images/beijing/4.jpg" alt="" /></li>
<li><img src="images/beijing/0.jpg" alt="" /></li>
</ul>
<a href="javascript:;" class="leftbtn" id="leftbtn"></a>
<a href="javascript:;" class="rightbtn" id="rightbtn"></a>
</div>
<script>
// 要做的 ul;
var ulObj = document.getElementById("list");
// 点击了右边按钮，ul的left的left值就发生改变，left减少了一张图片的值
// 左边按钮
var buttonLeft = document.getElementById("leftbtn");
// 右边按钮
var buttonRight = document.getElementById("rightbtn");
// 点按钮的时候，不能每次点都执行点击的逻辑，要一张图片跑完，点击才生效
// 先设置一个状态，默认false
var lock = false;
// 定义一个变量，下面要用这个变量来赋值ulObj.style.left
var currentPostion = 0;
// 开始写点击右侧按钮
buttonRight.onclick = function () {
if (lock) {
return;
}
// 如果能到这一步，就先上锁,上锁的状态下，不能操作这个函数（也就是点击了无效）
lock = true;
// 不会一直一直往左边跑，当跑完5张图片的距离的时候，又回到0
if (currentPostion === -(650 * 5)) {
currentPostion = 0;
// 回到原来位置的时候， 把过渡属性关掉，
ulObj.style.transition = "none";
}
// 上面下面都用到了transition,所以把下面的放到异步函数settimeout里面
setTimeout(() => {
// 点击一次，left就少650，（往左边跑650）
currentPostion -= 650;
// 跑的时候，需要加过渡属性
ulObj.style.transition = "left 0.5s ease 0s";
ulObj.style.left = currentPostion + "px";
}, 0);
// 因为设置的过渡属性是0.5秒，所以0.5秒，第一次点击执行完了，可以解锁了
setTimeout(() => {
lock = false;
}, 500);
};
// 右侧按钮逻辑结束
// 开始写左侧按钮，左侧按钮是跑到上一张
buttonLeft.onclick = function () {
if (lock) {
return;
}
lock = true;
// 如果跑到了最左边了，再点上一张就不行了，需要改当前的位置
if (currentPostion === 0) {
// 到最左边，需要把当前的图片拉到最后一张
currentPostion = -650 * 5;
ulObj.style.transition = "none";
}
// 为什么要把这个写在异步执行函数里面，因为上面下面都用到了过渡属性
setTimeout(() => {
// 每点击一次，ulObj的left值就加650
currentPostion += 650;
ulObj.style.transition = "left 0.5s ease 0s";
ulObj.style.left = currentPostion + "px";
}, 0);
setTimeout(() => {
lock = false;
}, 500);
};
</script>
</body>
</html>
