向选项卡添加自动播放功能

<div class="tabs">
  <div class="tab" data-tab="tab1">Tab 1</div>
  <div class="tab" data-tab="tab2">Tab 2</div>
  <div class="tab" data-tab="tab3">Tab 3</div>
</div>

<div class="tab-content">
  <div class="content" id="tab1">Content 1</div>
  <div class="content" id="tab2">Content 2</div>
  <div class="content" id="tab3">Content 3</div>
</div>

// 获取选项卡和内容区域的元素
const tabs = document.querySelectorAll('.tab');
const contents = document.querySelectorAll('.content');

// 定义自动播放的时间间隔（单位：毫秒）
const interval = 3000;

// 定义当前选中的选项卡索引
let currentIndex = 0;

// 自动播放函数
function autoPlay() {
  // 切换选项卡
  tabs[currentIndex].classList.remove('active');
  contents[currentIndex].classList.remove('active');

  currentIndex = (currentIndex + 1) % tabs.length;

  tabs[currentIndex].classList.add('active');
  contents[currentIndex].classList.add('active');
}

// 启动自动播放
const timer = setInterval(autoPlay, interval);

// 鼠标悬停时停止自动播放
tabs.forEach(tab => {
  tab.addEventListener('mouseover', () => {
    clearInterval(timer);
  });

  tab.addEventListener('mouseout', () => {
    timer = setInterval(autoPlay, interval);
  });
});