当前位置：首页 > CSS

网页制作css图片切换

2026-01-08 19:18:06CSS

CSS图片切换的实现方法

使用CSS实现图片切换可以通过多种方式完成，以下是几种常见的方法：

纯CSS轮播图

通过CSS动画和关键帧实现自动轮播效果。定义一个容器，内部放置多个图片，利用animation和@keyframes控制图片的切换。

.slider {
  width: 500px;
  height: 300px;
  overflow: hidden;
  position: relative;
}

.slider img {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  animation: slide 12s infinite;
}

.slider img:nth-child(1) {
  animation-delay: 0s;
}
.slider img:nth-child(2) {
  animation-delay: 3s;
}
.slider img:nth-child(3) {
  animation-delay: 6s;
}
.slider img:nth-child(4) {
  animation-delay: 9s;
}

@keyframes slide {
  0% { opacity: 0; }
  10% { opacity: 1; }
  25% { opacity: 1; }
  35% { opacity: 0; }
  100% { opacity: 0; }
}

CSS悬停切换效果

通过:hover伪类实现鼠标悬停时切换图片。将两张图片重叠，默认显示第一张，悬停时显示第二张。

.image-switch {
  width: 300px;
  height: 200px;
  position: relative;
}

.image-switch img {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: opacity 0.5s;
}

.image-switch img.front {
  opacity: 1;
}

.image-switch img.back {
  opacity: 0;
}

.image-switch:hover img.front {
  opacity: 0;
}

.image-switch:hover img.back {
  opacity: 1;
}

CSS复选框切换

利用:checked伪类和相邻兄弟选择器实现点击切换图片。隐藏一个复选框，通过其状态控制图片显示。

.switch-container {
  position: relative;
}

.switch-container input[type="checkbox"] {
  display: none;
}

.switch-container label {
  display: block;
  width: 300px;
  height: 200px;
  cursor: pointer;
}

.switch-container .image1, 
.switch-container .image2 {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: opacity 0.5s;
}

.switch-container .image2 {
  opacity: 0;
}

.switch-container input[type="checkbox"]:checked ~ .image1 {
  opacity: 0;
}

.switch-container input[type="checkbox"]:checked ~ .image2 {
  opacity: 1;
}