Html CSS：使用radio:checked滑动图像（纯CSS滑块）_Html_Css

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

html css

Html CSS：使用radio:checked滑动图像（纯CSS滑块）,html,css,Html,Css,目标是只使用CSS创建一个滑块。在这次尝试中，我尝试使用一个200px x 1500px的图像，它有“3个部分”（彩色编码）默认选中单选按钮以Left:0绝对定位，显示图像的第一个500px（幻灯片1），因为包装是200x500像素，溢出隐藏。通过标签检查单选按钮中的“slide2”，通过将图像定位到左侧，可以得到图像的下一个500px（幻灯片2）：-500px。目前效果不错。我遇到的问题是将图像放入幻灯片-1000px，从而显示图像的最终500px（幻灯片3）。似乎当我添加第三个无线

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

链接到图像：

HTML:

谢谢你的帮助！如果有一种更简单/更简单的方法可以在css中使用控件制作滑块，我很想知道。尝试了我在网上找到的几个例子，但没有一个看起来或动画像我所希望的那样。

现在开始-整合一些CSS，用第三个图像扩展它，并使用

translateX（）

和

不透明度

来增强幻灯片之间的过渡

img{
位置：绝对位置；
排名：0；
左：0；
过渡：不透明度。5s放松，变换。5s放松；
转化：translateX（-100%）；
/*变换：translateX（-100%）旋转（-720deg）；*//*试试这个，它是坚果*/
不透明度：0；
}
输入[type=“radio”]{
显示：无；
}
输入：选中+img{
变换：translateX（0）；
/*transform:translateX（0）rotate（0）；*/*使用上面的注释行尝试此操作*/
不透明度：1；
z指数：1；
}
.控制{
位置：绝对位置；
顶部：0；左侧：0；
z指数：2；
}
标签{
背景：rgba（0,0,0,0.8）；
颜色：#fff；
填充：.5em；
边距：0.1米0；
显示：内联块；
光标：指针；
}


幻灯片1
幻灯片2
幻灯片3

谢谢你，迈克尔，这很好用。快速提问：在上一张图像滑出之前，您将如何设置延迟？看起来新的图像是重叠的？多谢各位@3412127 np。单靠CSS是做不到的。您需要使用javascript。如果您试图用CSS构建类似的东西，您的能力确实有限。@3412127 btw欢迎使用SO。如果帖子有助于鼓励参与，并向搜索您的问题并找到此帖子的人显示答案是好的，那么一定要向上投票，并且一定要在某个时候接受答案（答案旁边的复选标记）@3412127做了几次编辑。更改活动幻灯片的z索引可能会使下一张幻灯片看起来重叠。还添加了两行

rotate（）

行并注释掉了它们，但您也可以检查一下。谢谢您的提示。我试过z指数，但我不认为有什么不同，但没关系，我读了你之前的评论。这是香蕉的！不过，当减速到1秒时，看起来更温和。

<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>

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;
}*/