CSS：使用 radio:checked 滑动图像（纯 CSS 滑块）答案

【问题标题】：CSS: Sliding an image with radio:checked (Pure CSS slider)CSS：使用 radio:checked 滑动图像（纯 CSS 滑块）
【发布时间】：2017-02-23 09:56:51
【问题描述】：

目标是仅使用 CSS 创建一个滑块。对于这次尝试，我尝试使用具有“3 个部分”（颜色编码）的 200 像素 x 1500 像素图像绝对定位为 Left: 0，默认选中的单选按钮显示图像的前 500 像素（幻灯片 1），因为包装器是 200x500 像素，溢出隐藏。通过标签检查'slide2'的单选按钮，通过将图像定位到左侧：-500px，可以得到下一个 500px 的图像（幻灯片 2）。暂时可以正常工作。我遇到的问题是让图像滑动 -1000 像素，从而显示图像的最终 500 像素（幻灯片 3）。似乎当我添加第三个无线电输入和标签时，滑块中断并且其他输入不做任何事情。事实上，第一个单选按钮 css 有时似乎毫无意义，因为在图像本身上设置过渡似乎是获得“幻灯片 1”单选按钮所需效果的必要条件。

图片链接：http://imgur.com/a/DCiI4

HTML：

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="default.css"/>
    </head>
<body>
    <div id="wrap">
        <input type="radio" id="slide1" name="radio" checked>
        <input type="radio" id="slide2" name="radio">
        <!--<input type="radio" id="slide3" name="radio">-->
        <img src="images/slides.jpg"/>
        <label for="slide1">slide1</label>
        <label for="slide2">slide2</label>
        <!--<label for="slide3">slide3</label>-->
    </div>
</body>
</html>

CSS：

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

#wrap {
    width: 500px;
    height: 200px;
    background: #000;
    color: #fff;
    position: relative;
    /*overflow: hidden;*/
}

img {
    position: absolute;
    top: 20;
    left: 0;
    transition: .5s ease-out;
    height: 200px;
    width: 1500px;
}

input[type="radio"] {
    display: none;
}

#slide1:checked + img {
    left: 0;
    transition: .5s ease-out;
}

#slide2:checked + img {
    left: -500px;
    transition: .5s ease-out;
}

/*#slide3:checked + img {
    left: -1500px;
    transition: .5s ease-out;
}*/

感谢您的帮助！如果有一种更简单/更简单的方法可以在 CSS 中使用控件来制作滑块，我很想知道。尝试了几个我在网上找到的示例，但没有一个看起来或动画完全符合我的要求。

【问题讨论】：

标签： html css

【解决方案1】：

来吧 - 合并您的一些 CSS，用第三张图片对其进行扩展，并使用 translateX() 和 opacity 来增强幻灯片之间的过渡效果。

img {
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity .5s ease-out, transform .5s ease-out;
  transform: translateX(-100%);
  /* transform: translateX(-100%) rotate(-720deg); */ /* try this, it's nuts */
  opacity: 0;
}

input[type="radio"] {
  display: none;
}

input:checked + img {
  transform: translateX(0);
  /* transform: translateX(0) rotate(0); */ /* try this with the commented line above */
  opacity: 1;
  z-index: 1;
}

.controls {
  position: absolute;
  top: 0; left: 0;
  z-index: 2;
}

label {
  background: rgba(0,0,0,0.8);
  color: #fff;
  padding: .5em;
  margin: 0 1em 0 0;
  display: inline-block;
  cursor: pointer;
}

<div id="wrap">
  <input type="radio" id="slide1" name="radio" checked>
  <img src="http://kenwheeler.github.io/slick/img/fonz1.png" />
  <input type="radio" id="slide2" name="radio">
  <img src="http://www.star2.com/wp-content/uploads/2015/06/happy-days-770x470.jpg">  
  <input type="radio" id="slide3" name="radio">
  <img src="https://timedotcom.files.wordpress.com/2016/08/henry-winkler.jpg?quality=85">
  <div class="controls">
    <label for="slide1">slide1</label>
    <label for="slide2">slide2</label>
    <label for="slide3">slide3</label>
  </div>
</div>

【讨论】：

谢谢迈克尔，效果很好。快速提问：在上一张图片滑出之前，您将如何设置延迟？所以看起来滑入的新图像与它重叠？非常感谢！
@3412127 np。你不能单独使用 CSS 来做到这一点。你需要使用javascript。尝试使用 CSS 构建类似的东西时，你能做的事情真的很有限。
@3412127 顺便说一句，欢迎来到 SO。如果帖子有助于鼓励参与，请务必对帖子进行投票，并向搜索您的问题并找到此帖子的任何人展示哪些答案是好的，并确保在某个时候接受答案（答案的复选标记）
@3412127 进行了一些编辑。更改活动幻灯片的 z-index 可能会使下一张幻灯片看起来像是重叠的。还添加了几行 rotate() 并将它们注释掉，但您也可以检查一下。
感谢您的提示。我已经尝试过 z-index，但我认为我没有看到有什么不同，但没关系，我阅读了您之前的评论。旋转是香蕉的！不过，当减速到 1 秒时看起来更温和。