html1.创建5个图片和按钮 2.只展示一个图片，对应按钮颜色区分 点击按钮，对应图片展示，其他图片隐藏

好的，我来为您解答这个问题。

首先，您需要在HTML中创建5个图片和5个按钮，如下所示：

<img src="image1.jpg" class="image active">
<img src="image2.jpg" class="image">
<img src="image3.jpg" class="image">
<img src="image4.jpg" class="image">
<img src="image5.jpg" class="image">

<button class="btn active" onclick="showImage(1)">1</button>
<button class="btn" onclick="showImage(2)">2</button>
<button class="btn" onclick="showImage(3)">3</button>
<button class="btn" onclick="showImage(4)">4</button>
<button class="btn" onclick="showImage(5)">5</button>

其中，`class="image active"` 表示第一个图片默认展示，`class="btn active"` 表示第一个按钮默认选中。

接下来，您需要编写JavaScript函数 `showImage()`，用于根据按钮点击来展示对应的图片。

function showImage(index) {
  // 隐藏所有图片和按钮
  var images = document.getElementsByClassName("image");
  for (var i = 0; i < images.length; i++) {
    images[i].classList.remove("active");
  }
  var buttons = document.getElementsByClassName("btn");
  for (var i = 0; i < buttons.length; i++) {
    buttons[i].classList.remove("active");
  }

  // 显示对应的图片和按钮
  var image = document.getElementsByClassName("image")[index - 1];
  image.classList.add("active");
  var button = document.getElementsByClassName("btn")[index - 1];
  button.classList.add("active");
}

在 `showImage()` 函数中，首先将所有图片和按钮的 `active` 类删除，然后根据传入的参数 `index` 来显示对应的图片和按钮。

最后，您需要为图片和按钮添加样式，使得当前展示的图片和选中的按钮有颜色区分。

.image {
  display: none;
}
.image.active {
  display: block;
}
.btn {
  background-color: #ccc;
}
.btn.active {
  background-color: #f00;
}

其中，`.image` 的 `display: none` 表示默认隐藏所有图片，`.image.active` 的 `display: block` 表示展示当前选中的图片。`.btn` 的 `background-color: #ccc` 表示默认按钮颜色，`.btn.active` 的 `background-color: #f00` 表示选中按钮的颜色。

这样，当您点击不同的按钮时，对应的图片会展示出来，其他图片会隐藏，对应按钮也会变为选中状态，其他按钮会取消选中状态。