图片轮播时触碰可更换图片

要实现图片轮播时触碰可更换图片的效果，可以在 HTML 中使用 `<img>` 标签来添加图片，然后使用 JavaScript 来实现触碰事件。具体步骤如下：

1. HTML 中添加图片

<div class="slider">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>

2. CSS 中设置样式

.slider {
  position: relative;
  width: 100%;
  height: auto;
}

.slider img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.slider img:first-child {
  opacity: 1;
}

上面的代码和之前的一样，我们给 `.slider` 容器设置了 `position: relative`，并给其中的图片设置了 `position: absolute`，这样图片就可以重叠在一起。然后，我们给第一张图片设置了 `opacity: 1`，让它默认显示出来。

3. JavaScript 中实现触碰事件

const slider = document.querySelector('.slider');
const images = document.querySelectorAll('.slider img');
let currentImageIndex = 0;

slider.addEventListener('mouseover', () => {
  images[currentImageIndex].style.opacity = 0.5;
});

slider.addEventListener('mouseout', () => {
  images[currentImageIndex].style.opacity = 1;
});

slider.addEventListener('click', () => {
  images[currentImageIndex].style.opacity = 0;
  currentImageIndex++;
  if (currentImageIndex >= images.length) {
    currentImageIndex = 0;
  }
  images[currentImageIndex].style.opacity = 1;
});

上面的代码中，我们首先获取到 `.slider` 容器和其中的所有图片。然后，我们给容器添加了 `mouseover` 和 `mouseout` 事件，当鼠标悬停在容器上时，当前图片的透明度变成了 0.5，当鼠标离开容器时，当前图片的透明度又变成了 1。

我们还给容器添加了 `click` 事件，当容器被点击时，当前图片的透明度变成了 0，然后 `currentImageIndex` 递增，如果递增后超过了图片总数，就将 `currentImageIndex` 重置为 0，最后将下一张图片的透明度设置为 1，从而实现了图片轮播的效果。