使用prev/next按钮循环切换多个div

<div class="div-1">
  <h2>Div 1</h2>
  <p>This is the content of div 1.</p>
</div>

<div class="div-2">
  <h2>Div 2</h2>
  <p>This is the content of div 2.</p>
</div>

<div class="div-3">
  <h2>Div 3</h2>
  <p>This is the content of div 3.</p>
</div>

// 获取所有的div元素
var divs = document.querySelectorAll('div');

// 设置初始索引为0，表示显示第一个div
var currentIndex = 0;

// 获取prev和next按钮
var prevButton = document.getElementById('prev-button');
var nextButton = document.getElementById('next-button');

// 添加事件监听器
prevButton.addEventListener('click', function() {
  // 隐藏当前的div
  divs[currentIndex].style.display = 'none';

  // 计算前一个div的索引
  currentIndex = (currentIndex - 1 + divs.length) % divs.length;

  // 显示新的div
  divs[currentIndex].style.display = 'block';
});

nextButton.addEventListener('click', function() {
  // 隐藏当前的div
  divs[currentIndex].style.display = 'none';

  // 计算下一个div的索引
  currentIndex = (currentIndex + 1) % divs.length;

  // 显示新的div
  divs[currentIndex].style.display = 'block';
});