2d轮转图根据按钮进行切换，并且里面的背景是一样的，但是按钮文字要进行改变

在二维轮播图中，通常会有一个背景图像固定不变，而按钮作为导航控制元素，会随着用户的交互（比如点击事件）动态地切换显示的文字内容。这种设计允许用户通过点击不同的按钮来切换图片展示的内容，同时保持背景画面的一致性。

实现这一功能，你需要准备一组预设的按钮文字，对应每一张图片。在HTML中，可以设置每个按钮的初始状态和`onclick`事件，当按钮被点击时触发JavaScript或jQuery函数。这个函数会更新当前显示的按钮文本，同时管理轮播图的索引，让下一张图片显示出来。如果使用的是CSS动画或JavaScript库如Swiper.js等，还需要对轮播图进行相应的操作，以便实现图片的切换。

示例代码：

<div class="carousel">
  <img src="image1.jpg" alt="Image 1">
  <button id="btn1">按钮1</button>
  <button id="btn2" style="display: none;">按钮2</button>
  <!-- 添加更多按钮... -->
</div>

<script>
  let currentSlide = 0;
  
  function switchButtons(text) {
    // 隐藏当前按钮并显示新的按钮文字
    document.getElementById("btn" + currentSlide).style.display = "none";
    document.getElementById("btn" + (currentSlide + 1)).innerText = text;
    
    // 更新按钮和轮播图索引
    currentSlide = (currentSlide + 1) % buttons.length; // 确保索引不会超过总按钮数
    showSlide(currentSlide);
  }
  
  // 轮播图片的显示方法
  function showSlide(index) {
    document.querySelector('.carousel img').src = 'image' + (index + 1) + '.jpg';
    switchButtons('新按钮文字'); // 根据需要更改按钮文字
  }
  
  // 当按钮被点击时，触发切换
  document.getElementById('btn1').addEventListener('click', function() {
    switchButtons('新按钮1');
  });
</script>