网页怎么做图片点击后轮换

实现图片点击后轮换的方法有多种，其中比较简单的方法是使用 JavaScript 和 CSS3 动画。以下是一个基本的实现方法：

HTML：

<div class="img-container">
  <img src="img1.jpg" class="active">
  <img src="img2.jpg">
  <img src="img3.jpg">
</div>

CSS：

.img-container {
  position: relative;
}
.img-container img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}
.img-container img.active {
  opacity: 1;
}

JavaScript：

var images = document.querySelectorAll('.img-container img');
var currentIndex = 0;

function rotateImages() {
  // 隐藏当前显示的图片
  images[currentIndex].classList.remove('active');
  // 计算下一个图片的索引
  currentIndex = (currentIndex + 1) % images.length;
  // 显示下一个图片
  images[currentIndex].classList.add('active');
}

// 给图片添加点击事件
for (var i = 0; i < images.length; i++) {
  images[i].addEventListener('click', rotateImages);
}

// 初始显示第一张图片
images[currentIndex].classList.add('active');

这个实现方法中，使用 CSS3 动画实现了图片的淡入淡出效果，使用 JavaScript 控制了图片的轮换。点击任意一张图片后，当前显示的图片会淡出，下一张图片则会淡入，然后将当前图片的索引更新为下一张图片的索引。如果已经显示了最后一张图片，则下一张图片的索引会重新从第一张图片开始。