[分享]css两个幻灯片在一个div

在网页制作中，幻灯片是常用的元素之一，可以很好地展示各种图片或内容。但有时候我们需要在同一个页面中展示两个不同的幻灯片，这时候就需要用到 CSS 去实现。下面是一个例子，我们来创建一个带有两个幻灯片的...

在网页制作中，幻灯片是常用的元素之一，可以很好地展示各种图片或内容。但有时候我们需要在同一个页面中展示两个不同的幻灯片，这时候就需要用到 CSS 去实现。

下面是一个例子，我们来创建一个带有两个幻灯片的 DIV 区域：

<div class="slideshow">
  <div class="slideshow1">...</div>
  <div class="slideshow2">...</div>
</div>

上述代码创建了一个名为 slideshow 的 DIV 区域，并在其中添加了两个名为 slideshow1 和 slideshow2 的 DIV。现在我们需要设置样式以使这两个 DIV 成为幻灯片，并在 slideshow 区域中水平排列。

/* 设置幻灯片区域 */
.slideshow {
  display: flex;  /* 使用 Flexbox 水平排列页面元素 */
  justify-content: space-between;  /* 幻灯片之间的空间平均分布 */
  padding: 20px;  /* 边距用于让幻灯片不靠边 */
}

/* 设置每个幻灯片 */
.slideshow1,
.slideshow2 {
  flex-grow: 1;  /* 扩展以填充幻灯片间距 */
  height: 300px; /* 定义幻灯片高度 */
  overflow: hidden;  /* 隐藏溢出内容 */
}

/* 在幻灯片上添加图片 */
.slideshow1 img,
.slideshow2 img {
  width: 100%;  /* 图片宽度与幻灯片相同 */
  height: 100%; /* 图片高度与幻灯片相同 */
  object-fit: cover;  /* 不失真填充幻灯片 */
}

上述代码中，我们利用了 CSS Flexbox 布局，在 slideshow 区域中水平排列了两个幻灯片。每个幻灯片都设置了弹性以填充空隙并具有固定的高度。我们还将幻灯片图片设置为完全填充幻灯片，不会失真。

最后，我们需要使用 JavaScript 或 jQuery 等工具为幻灯片添加滑动效果。我们可以通过设置一个计时器函数，每隔几秒钟切换到下一张幻灯片。这里不再介绍具体的代码，感兴趣的读者可以自行搜索相关资料。

以上是关于如何使用 CSS 在同一个 DIV 区域中实现两个幻灯片的方法，希望能对大家有所帮助。