javascript呼吸轮播图制作特效```html ```javascript呼吸轮播图制作特效javascript呼

<!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>
  </body>
  <script>
    // 点击右侧按钮的时候，当前的li透明度变成0，下一张的透明度变成1
    var liArr = document.querySelectorAll("ul>li");
    // 定义一个当前的数字为0
    var currentNumber = 0;
    var lock = false;
    var rightButton = document.getElementById("rightbtn");
    rightButton.onclick = function () {
      //函数防抖动，函数回流的使用
      //   右侧按钮也不能一直点，需要上锁，解锁以后才能点
      if (lock) {
        return;
      }
      lock = true;
      liArr[currentNumber].style.opacity = "0";
      currentNumber++;

      //   这里不能一直加下去
      if (currentNumber == 4) {
        currentNumber = 0;
      }
      liArr[currentNumber].style.opacity = "1";
      //   也不能一直锁上，不然直接点不了，一秒以后就可以继续点击一次了
      setInterval(() => {
        lock = false;
      }, 1000);
    };

    // 开始写点击左边
    // 只有点击了，这一切才会发生，所以都写在监听里面
    var lefttButton = document.getElementById("leftbtn");
    lefttButton.onclick = function () {
      if (lock) {
        return;
      }
      lock = true;
      liArr[currentNumber].style.opacity = "0";
      currentNumber--;
      /* 点击左侧按钮，如果出现白色，意味着当前位置变成了-1 */
      if (currentNumber === -1) {
        currentNumber = 4;
      }
      liArr[currentNumber].style.opacity = "1";
      setTimeout(function () {
        lock = true;
      }, 1000);
    };
  </script>
</html>