总的来说，就是修改透明度。
liArray[0].style.opacity = "0"或者1.
透明度为0，隐藏。透明度为1，显示。
在写点击事件的时候，当前的透明度为0，（完全隐藏），下一张的透明度为1（显示）。
使用document.querrySelectAll()找到所有的元素，这时候是一个数组。要用下标来操作里面的元素。
函数节：首先定义一个状态，默认是false，var lock = false,在写点击的逻辑的时候，先让lock = true. 看设置的过渡属性里面的时间，根据时间来修改lock的状态，使用settimeout()。
点击上一张按钮也是同理。当点击上一张已经是第一张了，再点数组的下标就是-1了，这时候需要把下标设置为最后一张的下标。
<!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;
}
.carousel ul {
list-style: none;
}
.carousel ul li {
position: absolute;
top: 0;
left: 0;
/* 透明度都是0 */
opacity: 0;
transition: opacity 1s ease 0s;
}
/* 只有第一张透明度是1 */
.carousel ul li:first-child {
opacity: 1;
}
.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>
</ul>
<a href="javascript:;" class="leftbtn" id="leftbtn"></a>
<a href="javascript:;" class="rightbtn" id="rightbtn"></a>
</div>
<script>
// 先定义一个变量，用来调整数组的下标
var currentNumber = 0;
/* 透明度为1，完全显示，透明度为0，完全隐藏 */
// 点击的时候，当前隐藏（透明度为0），下一张显示，透明图为1，
// 找到ul下面所有的li，找到的是一个数组。如果操作里面其中一张，需要用数组的方式
var liArr = document.querySelectorAll("li");
var leftButton = document.getElementById("leftbtn");
var rightButton = document.getElementById("rightbtn");
var lock = false;
// 开始写右侧按钮的点击逻辑
// 所有的内容都写在这个逻辑里面
rightButton.onclick = function () {
if (lock) {
return false;
}
lock = true;
// 当currentNumber的值为5的时候，又要从第一张开始
if (currentNumber === 5) {
currentNumber = 0;
}
liArr[currentNumber].style.opacity = "0";
// 点击一次，当前值就自增
currentNumber++;
// li显示，也就是透明度为1
liArr[currentNumber].style.opacity = "1";
// 因为过度属性设置的是1秒，所以1秒以后解锁
setTimeout(() => {
lock = false;
}, 1000);
};
// 右侧按钮点击事件结束
// 左侧按钮的点击逻辑
leftButton.onclick = function () {
if (lock) {
return;
}
lock = false;
liArr[currentNumber].style.opacity = "0";
currentNumber--;
// 到一直点上一张回到第一张了，再点就是-1了，就不能再点了，所以如果点了数组的下标是-1，需要把当前的数字变成最后一张
if (currentNumber === -1) {
currentNumber = 4;
}
liArr[currentNumber].style.opacity = "1";
setTimeout(() => {
lock = false;
}, 1000);
};
</script>
</body>
</html>
