[分享]css中如何设置图片切换

CSS中如何设置图片切换？ 在Web开发中，经常需要设置图片切换效果来增强页面的视觉效果。下面，我们将介绍两种常用的CSS方法实现图片切换。 方法一： / HTML代码 / / CSS代码 /...

CSS中如何设置图片切换？

在Web开发中，经常需要设置图片切换效果来增强页面的视觉效果。下面，我们将介绍两种常用的CSS方法实现图片切换。

方法一：

/* HTML代码 */
<div class="switch">
  <img src="img1.jpg">
  <img src="img2.jpg">
</div>

/* CSS代码 */
.switch {
  position: relative;
  height: 200px;
  width: 400px;
}
.switch img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1s;
}
.switch img:first-child {
  opacity: 1;
}
.switch:hover img:last-child {
  opacity: 1;
} 

方法二：

/* HTML代码 */
<div class="slider">
  <img src="img1.jpg" class="slide active">
  <img src="img2.jpg" class="slide">
  <img src="img3.jpg" class="slide">
</div>
<button class="prev">上一张</button>
<button class="next">下一张</button>

/* CSS代码 */
.slider {
  position: relative;
  height: 200px;
  width: 400px;
  overflow: hidden;
}
.slide {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1s;
}
.active {
  opacity: 1;
}
.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.prev {
  left: 0;
}
.next {
  right: 0;
} 

以上方法均使用CSS的过渡效果实现图片切换，方法一是鼠标悬浮到图片上时，显示下一张图片，方法二是通过按钮控制上一张或下一张图片的显示。这些方法都可以根据实际需求进行修改和拓展。