当前位置：首页 > CSS

网页制作css图片切换

2026-02-12 15:39:42CSS

CSS 图片切换实现方法

方法一：使用纯 CSS 轮播图

通过 CSS 动画和关键帧实现自动切换效果。HTML 结构包含一个容器和多个图片元素，CSS 设置动画属性控制切换。

<div class="slider">
  <img src="image1.jpg" class="slide">
  <img src="image2.jpg" class="slide">
  <img src="image3.jpg" class="slide">
</div>

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

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

.slide:nth-child(1) { animation-delay: 0s; }
.slide:nth-child(2) { animation-delay: 4s; }
.slide:nth-child(3) { animation-delay: 8s; }

@keyframes slide {
  0%, 33.33% { opacity: 1; }
  33.33%, 66.66% { opacity: 0; }
  66.66%, 100% { opacity: 0; }
}

方法二：CSS 悬停切换效果

网页制作css图片切换

通过 hover 伪类实现鼠标悬停时显示不同图片。适用于简单的两张图片切换场景。

<div class="image-switch">
  <img src="default.jpg" class="default">
  <img src="hover.jpg" class="hover">
</div>

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

.image-switch .hover {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s;
}

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

方法三：CSS 复选框切换

网页制作css图片切换

利用 label 和 checkbox 实现点击切换效果，无需 JavaScript。

<input type="checkbox" id="toggle" hidden>
<label for="toggle" class="switch-btn">切换图片</label>
<div class="image-container">
  <img src="day.jpg" class="day">
  <img src="night.jpg" class="night">
</div>

.image-container {
  position: relative;
  width: 400px;
  height: 300px;
}

.night {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.3s;
}

#toggle:checked ~ .image-container .night {
  opacity: 1;
}

方法四：CSS 变量切换

通过改变 CSS 自定义变量值实现动态切换，需要配合少量 JavaScript。

<div class="variable-slider" style="--current-index: 0">
  <img src="pic1.jpg">
  <img src="pic2.jpg">
  <img src="pic3.jpg">
</div>
<button onclick="changeSlide(-1)">上一条</button>
<button onclick="changeSlide(1)">下一条</button>

.variable-slider {
  --current-index: 0;
  display: flex;
  width: 600px;
  height: 400px;
  overflow: hidden;
}

.variable-slider img {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  transform: translateX(calc(var(--current-index) * -100%));
  transition: transform 0.5s;
}

function changeSlide(offset) {
  const slider = document.querySelector('.variable-slider');
  const count = slider.children.length;
  let current = parseInt(slider.style.getPropertyValue('--current-index'));
  current = (current + offset + count) % count;
  slider.style.setProperty('--current-index', current);
}