hbulider x 点击按钮切换图片的效果

HBuilder X是一款由腾讯云推出的前端开发工具，它集成了HTML、CSS、JavaScript编辑器以及UI设计功能。如果你想在HBuilder X中实现点击按钮切换图片的效果，你可以按照以下步骤操作：

1. **创建HTML结构**：首先，你需要准备两个或更多的`<img>`标签，每个代表一张图片，同时包含一个用于触发切换的按钮元素。

<button id="switchButton">切换图片</button>
<div class="image-container">
   <img src="image1.jpg" alt="图1" class="hidden">
   <img src="image2.jpg" alt="图2" class="visible">
   <!-- 添加更多图片... -->
</div>

2. **添加CSS样式**：隐藏除第一张图片外的所有图片，并为显示状态添加`.visible`类。

.hidden {
   display: none;
}
.visible {
   display: block;
}

3. **编写JavaScript**：利用JavaScript监听按钮点击事件，切换`img`的`src`属性以及对应的可见性状态。

document.getElementById('switchButton').addEventListener('click', function() {
   var images = document.querySelectorAll('.image-container img');
   for (var i = 0; i < images.length; i++) {
      if (!images[i].classList.contains('visible')) {
         images[i - 1].classList.add('hidden'); // 如果不是最后一张，隐藏当前可见的图片
         images[i].classList.remove('hidden'); // 显示下一张
         break;
      }
   }
});