轮播图带进度仿火山引擎 https://www.volcengine.com/product/datatester

轮播带进度.gif
<!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>
    .container {
      display: flex;
      flex-direction: row;
    }

    .left {
      display: flex;
      flex-direction: column;
      width: 200px;
      /* height: 400px; */
      background: gold;
    }

    .setup {
      width: 10px;
      background: red;
      height: 0;
    }

    .tablinks {
      flex: 1;
      cursor: pointer;
      display: flex;
    }

    .right {
      display: flex;
      flex-direction: column;
      height: 400px;
      width: 400px;
      background: palegreen;
    }

    .tab {
      display: none;
    }

    .tab:nth-child(1) {
      display: block;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="left">
      <div class="tablinks" onclick="switchTab(1)">
        <div class="setup" id="progress1"></div>
        left1
      </div>
      <div class="tablinks" onclick="switchTab(2)">
        <div class="setup" id="progress2"></div>
        left2
      </div>
      <div class="tablinks" onclick="switchTab(3)">
        <div class="setup" id="progress3"></div>
        left3
      </div>
    </div>
    <div class="right">
      <div id="tab1" class="tab">content1</div>
      <div id="tab2" class="tab">content2</div>
      <div id="tab3" class="tab">content3</div>
    </div>
  </div>
  <script>
    let currentTab = 1;
    let intervalId;
    let progress;
    let isPaused = false;
    let isPageVisible = true;

    function switchTab (tab) {
      clearInterval(intervalId); // 清除之前的计时器

      // 重置所有选项卡的进度条
      let progressElements = document.querySelectorAll(".setup");
      progressElements.forEach((element) => {
        element.style.height = "0";
      });

      currentTab = tab;
      showTab();
      if (!isPaused && isPageVisible) {
        startProgress();
      }
    }

    function showTab () {
      let tabs = document.getElementsByClassName("tab");
      for (let i = 0; i < tabs.length; i++) {
        tabs[i].style.display = "none";
      }
      tabs[currentTab - 1].style.display = "block";
    }

    function startProgress () {
      let progressElement = document.getElementById("progress" + currentTab);
      progressElement.style.height = "0";
      progress = 0;
      intervalId = setInterval(() => {
        if (!isPaused && isPageVisible) {
          progress += 1;
          progressElement.style.height = progress + "%";
          if (progress >= 100) {
            clearInterval(intervalId);
            progressElement.style.height = "0";
          }
        }
      }, 30);
    }

    // Start automatic tab switching
    let automaticSwitchInterval = setInterval(() => {
      if (!isPaused && isPageVisible) {
        currentTab = (currentTab % 3) + 1;
        switchTab(currentTab);
      }
    }, 3000);

    // Initial tab switch
    switchTab(currentTab);
    const leftElement = document.querySelector('.left');

    leftElement.addEventListener('mouseenter', () => {
      isPaused = true;
    });

    leftElement.addEventListener('mouseleave', () => {
      isPaused = false;
    });

  </script>
</body>

</html>