Pure CSS (3) Image slider

最新推荐文章于 2025-08-19 08:41:01 发布

原创最新推荐文章于 2025-08-19 08:41:01 发布 · 142 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

前端专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一种纯CSS实现的图片轮播效果，通过:checked伪类和label标签的for属性实现了图片切换功能，并详细解释了相关CSS选择器及属性的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

源案例在线预览

Code & 演示原地址：链接

代码复现（有修改）

CSS

<style>
  * {
    padding: 0;
    margin: 0;
  }

  html, body {
    width: 100%;
    height: 100%;
  }

  input {
    display: none;
  }

  ul {
    list-style: none;
  }

  .slides {
    padding: 0;
    width: 800px;
    height: 500px;
    display: block;
    margin: 0 auto;
    position: relative;
  }

  .slide {
    width: 800px;
    height: 500px;
    display: block;
    position: absolute;

    opacity: 0;
    transform: scale(0);

    transition: all .7s ease-in-out;
  }

  .slide img {
    width: 100%;
    height: 100%;
  }

  .prev, .next {
    width: 200px;
    height: 500px;
    display: none;
    position: absolute;
    top: 0;
    z-index: 10;

    opacity: 0;
    cursor: pointer;
    transition: all .2s linear;

    text-align: center;
    line-height: 500px;
    color: #ffffff;
    font-size: 150px;
    text-shadow: 0 0 15px rgb(119 119 119);
    background-color: rgba(255, 255, 255, .3);
  }

  .prev {
    left: 0;
  }

  .next {
    right: 0;
  }

  .prev:hover, .next:hover {
    opacity: 1;
  }

  .slide:hover ~ .prev, .slide:hover ~ .next {
    opacity: 0.5;
  }


  input:checked + .slide_container .slide {
    transform: scale(1);
    opacity: 1;
    transition: opacity 1s ease-in-out;
  }

  input:checked + .slide_container .prev, input:checked + .slide_container .next {
    display: block;
  }

  .nav_dots {
    position: absolute;
    bottom: 20px;
    left: 380px;
  }

  .nav_dot {
    width: 10px;
    height: 10px;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 5px;
    display: inline-block;
  }

  .nav_dot:hover {
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.8);
  }

  input#img-1:checked ~ .nav_dots > label#img-1-dot,
  input#img-2:checked ~ .nav_dots > label#img-2-dot,
  input#img-3:checked ~ .nav_dots > label#img-3-dot {
    background-color: rgba(0, 0, 0, 0.8);
  }
</style>

Html

<body>
<ul class="slides">
  <input type="radio" name="radio-btn" id="img-1" checked>
  <li class="slide_container">
    <div class="slide">
      <img src="https://img1.baidu.com/it/u=2365285587,1481932959&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500">
    </div>
    <label for="img-3" class="prev"><</label>
    <label for="img-2" class="next">></label>
  </li>

  <input type="radio" name="radio-btn" id="img-2">
  <li class="slide_container">
    <div class="slide">
      <img src="https://img1.baidu.com/it/u=3677912229,40698883&fm=253&fmt=auto&app=120&f=JPEG?w=1024&h=576">
    </div>
    <label for="img-1" class="prev"><</label>
    <label for="img-3" class="next">></label>
  </li>

  <input type="radio" name="radio-btn" id="img-3">
  <li class="slide_container">
    <div class="slide">
      <img src="https://img2.baidu.com/it/u=1572613686,938558453&fm=253&fmt=auto&app=120&f=JPEG?w=640&h=400">
    </div>
    <label for="img-2" class="prev"><</label>
    <label for="img-1" class="next">></label>
  </li>

  <li class="nav_dots">
    <label for="img-1" class="nav_dot" id="img-1-dot"></label>
    <label for="img-2" class="nav_dot" id="img-2-dot"></label>
    <label for="img-3" class="nav_dot" id="img-3-dot"></label>
  </li>
</ul>
</body>

通过案例学习到的新知识

选择器（总结）

兄弟选择器：同层级元素的选中。
1. + ：div+p，div元素后的首个相邻元素必须为p元素，才能命中该元素p。即之间不能存有其他同级兄弟元素。
2. ~ ：div~p，div元素后的所有同级的兄弟元素p，不包括div元素前的p元素。（忽视是否相邻）
后代选择器：子级元素的选中
1. > ：div > p，div下的第一层子元素中所有子元素p
2. 空格：div p，div下的所有子元素p（忽视层级）
AND选择器：例：.class1.class2，则同时具有两个class类名的元素. 例：input#id，input类型的具有该id值的元素

零散知识点

标签display: none后，元素不占位存在。依旧可以对元素进行操作，如监听input元素的是否被选中(伪类选择器:checked)
text-shadow可选属性值
1. h-shadow，必需。阴影出现的水平位置。允许负值。
2. v-shadow，必需。阴影出现的垂直位置。允许负值。
3. blur，可选。模糊的距离。(模糊程度，值越大越模糊)
4. color，可选。阴影的颜色。
scale(val): scale函数可以传递一个单值来同时表明x & y轴的缩放程度。例如: scale(0) 意味着元素宽高为0。scale(1) 意味着元素宽高不变。可以配合使用来模拟opacity: 0 / 1，这样的功效。但是需要注意，当scale(0)后，依然会占用原空间。
position定位时的元素覆盖：若同一区域出现了元素重叠，后出现的元素的z-index永远大于前面的元素。不会因为元素的position的值(absolute/relative)而导致z-index提高。

label标签的for属性（重点）

语义不复杂，难在于如何有效应用。
如在Pure CSS (1) 中的汉堡折叠菜单，利用了复选框的checked伪类选择器实现菜单的折叠。
本案例中，频繁使用了单选框的checked伪类选择器配合 lable标签的for属性，实现点击按钮切换图片与点击底部nav_dot切换对应的图片。作者设计的非常巧妙，值的学习。