正文

如何让JS控制两张动态变化的图片展示

/0 浏览量
0402

在这个问题中，我们将探讨如何使用JavaScript来控制两张图片的展示，使得它们能够动态变化。这个过程通常涉及到HTML、CSS和JavaScript的结合使用。下面，我将一步步地解释如何实现这个功能。

准备工作

首先，我们需要准备两张图片，并设置一个容器来展示它们。以下是HTML部分的基础代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态图片展示</title>
<style>
  .image-container {
    width: 500px;
    height: 300px;
    overflow: hidden;
    position: relative;
  }
  .image-container img {
    width: 100%;
    height: auto;
    position: absolute;
    transition: opacity 1s ease-in-out;
  }
  .image-container img.active {
    opacity: 1;
  }
  .image-container img.inactive {
    opacity: 0;
  }
</style>
</head>
<body>
<div class="image-container">
  <img src="image1.jpg" class="active">
  <img src="image2.jpg" class="inactive">
</div>

<script>
  // JavaScript代码将在这里编写
</script>

</body>
</html>

在上面的代码中，我们创建了一个名为 .image-container 的容器，其中包含了两张图片。每张图片都有一个 class，active 表示当前显示的图片，而 inactive 表示不显示的图片。

JavaScript 实现动态展示

接下来，我们将使用JavaScript来控制图片的切换。以下是一个简单的JavaScript代码示例：

document.addEventListener('DOMContentLoaded', function() {
  var currentImageIndex = 0;
  var images = document.querySelectorAll('.image-container img');
  var totalImages = images.length;

  function showImage(index) {
    images.forEach(function(img, i) {
      img.classList.remove('active');
      img.classList.add('inactive');
    });

    images[index].classList.remove('inactive');
    images[index].classList.add('active');
  }

  setInterval(function() {
    currentImageIndex = (currentImageIndex + 1) % totalImages;
    showImage(currentImageIndex);
  }, 3000); // 每3秒切换图片
});

在这段代码中，我们首先等待文档加载完成。然后，我们定义了一个变量 currentImageIndex 来跟踪当前显示的图片索引。showImage 函数用于切换图片的显示状态。我们使用 setInterval 函数来设置一个定时器，每3秒钟切换一次图片。

总结

通过以上步骤，我们已经实现了一个简单的图片切换功能。你可以根据需要调整图片切换的时间间隔、图片源路径以及样式。这个例子只是一个起点，你可以根据实际需求进行扩展和优化。

-- 展开阅读全文 --