当前位置：首页 > CSS

网页制作css图片切换

2026-03-31 23:37:49CSS

使用CSS实现图片切换

通过纯CSS可以实现图片轮播或切换效果，无需JavaScript。以下是几种常见方法：

方法一：CSS动画与关键帧

利用@keyframes和animation属性实现自动轮播：

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

.slides {
  display: flex;
  width: 400%; /* 图片数量乘以100% */
  animation: slide 10s infinite;
}

.slide {
  width: 25%; /* 100%/图片数量 */
}

@keyframes slide {
  0% { transform: translateX(0); }
  25% { transform: translateX(-25%); }
  50% { transform: translateX(-50%); }
  75% { transform: translateX(-75%); }
  100% { transform: translateX(0); }
}

HTML结构：

网页制作css图片切换

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

方法二：CSS伪类与复选框

通过:checked伪类实现手动切换：

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

.slide {
  position: absolute;
  opacity: 0;
  transition: opacity 1s;
}

input[type="radio"] {
  position: absolute;
  z-index: 10;
}

#slide1:checked ~ .slides .slide1,
#slide2:checked ~ .slides .slide2,
#slide3:checked ~ .slides .slide3 {
  opacity: 1;
}

HTML结构：

网页制作css图片切换

<div class="slider">
  <input type="radio" name="slider" id="slide1" checked>
  <input type="radio" name="slider" id="slide2">
  <input type="radio" name="slider" id="slide3">

  <div class="slides">
    <div class="slide slide1"><img src="image1.jpg"></div>
    <div class="slide slide2"><img src="image2.jpg"></div>
    <div class="slide slide3"><img src="image3.jpg"></div>
  </div>
</div>

方法三：悬停切换效果

通过:hover伪类实现鼠标悬停切换：

.gallery {
  display: flex;
}

.thumbnail {
  width: 100px;
  height: 100px;
  margin: 5px;
  cursor: pointer;
}

.preview {
  width: 500px;
  height: 300px;
  background-size: cover;
  transition: background-image 0.5s;
}

.thumbnail:hover + .preview {
  background-image: url(large-image.jpg);
}

HTML结构：

<div class="gallery">
  <img src="thumb1.jpg" class="thumbnail">
  <img src="thumb2.jpg" class="thumbnail">
  <img src="thumb3.jpg" class="thumbnail">
  <div class="preview"></div>
</div>