js爱心照片增代码

以下是一个简单的JS代码示例，可以将一组图片转换为爱心形状，并在用户点击图像时切换到下一张图片。

HTML:

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

CSS:

#img-container {
  position: relative;
  width: 600px;
  height: 400px;
}

#img-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  transition: opacity 0.5s ease-in-out;
}

#img-container img.hidden {
  opacity: 0;
}

JS:

const images = document.querySelectorAll('#img-container img');
let currentIndex = 0;

function toggleImage() {
  images[currentIndex].classList.add('hidden');
  currentIndex = (currentIndex + 1) % images.length;
  images[currentIndex].classList.remove('hidden');
}

document.addEventListener('click', toggleImage);

当用户点击页面上的任何地方时，`toggleImage`函数将被调用。它将当前显示的图像隐藏，并显示下一张图像，循环遍历所有图像。CSS中的`clip-path`属性定义了图片的爱心形状。