两张图片交替展示，from concept to reality效果

效果展示

具体代码

HTML

<div class="image-container">
  <img class="concept-image" src="https://www.210k.cc/wp-content/uploads/2023/09/concept.png" alt="concept image">
  <img class="product-image" src="https://www.210k.cc/wp-content/uploads/2023/09/reality.png" alt="product image">
</div>

CSS

<style>
.image-container {
  position: relative;
  width: 600px; /* 调整容器的宽度 */
  height: 600px; /* 调整容器的高度 */
  overflow: hidden; /* 隐藏超出容器的部分 */
}

.concept-image,
.product-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0; /* 初始时图片完全透明 */
}

.concept-image.show,
.product-image.show {
  opacity: 1; /* 显示图片 */
  animation: fadeAnimation 4s ease-in-out infinite; /* 图片淡入淡出并无限循环 */
}

/* 创建动画效果 */
@keyframes fadeAnimation {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

</style>

JS

<script>
var conceptImage = document.querySelector('.concept-image');
var productImage = document.querySelector('.product-image');

var interval;

function switchImages() {
  if (conceptImage.classList.contains('show')) {
    conceptImage.classList.remove('show');
    productImage.classList.add('show');
  } else {
    conceptImage.classList.add('show');
    productImage.classList.remove('show');
  }
}

conceptImage.classList.add('show');
interval = setInterval(switchImages, 8000); 

conceptImage.addEventListener('animationiteration', function() {
  conceptImage.classList.remove('show');
  clearInterval(interval);
  productImage.classList.add('show');
  interval = setInterval(switchImages, 8000);
});

productImage.addEventListener('animationiteration', function() {
  productImage.classList.remove('show');
  clearInterval(interval);
  conceptImage.classList.add('show');
  interval = setInterval(switchImages, 8000);
});
</script>