首页 文章

CSS:使用收音机滑动图像:选中(纯CSS滑块)

提问于
浏览
0

目标是仅使用CSS创建滑块 . 对于这次尝试,我尝试使用具有“3个部分”(颜色编码)的200px乘1500px图像绝对使用Left定位:0,默认选中的单选按钮显示图像的前500px(幻灯片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,我很想知道 . 试过我在网上找到的几个例子,但没有一个看起来像我想要的动画 .

1 回答

  • 0

    在这里你去巩固你的一些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>
    

相关问题