tool-box
/
lubo2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
                display: flex;
                justify-content: center;
                align-items: center;
                min-height: 100vh;
            }

            ul.slides {
                position: relative;
                width: 600px;
                height: 280px;
                list-style: none;
                margin: 0;
                padding: 0;
                background-color: #eee;
                overflow: hidden;
            }

            li.slide {
                margin: 0;
                padding: 0;
                width: inherit;
                height: inherit;
                position: absolute;
                top: 0;
                left: 0;
                display: flex;
                justify-content: center;
                align-items: center;
                font-family: Helvetica;
                font-size: 120px;
                color: #fff;
                transition: .5s transform ease-in-out;
            }

            .slide:nth-of-type(1) {
                background-color: #F2E205;
            }

            .slide:nth-of-type(2) {
                background-color: #F25C05;
                left: 100%;
            }

            .slide:nth-of-type(3) {
                background-color: #495F8C;
                left: 200%;
            }


            input[type="radio"] {
                position: relative;
                z-index: 100;
                display: inline-block;
            }

            .controls-visible {
                position: absolute;
                width: 100%;
                bottom: 12px;
                text-align: center;
            }

            .controls-visible label {
                display: inline-block;
                width: 10px;
                height: 10px;
                background-color: #fff;
                border-radius: 50%;
                margin: 0 3px;
                border: 2px solid #fff;
            }


            .slides input[type="radio"]:nth-of-type(1):checked ~ .controls-visible label:nth-of-type(1) {
                background-color: #333;
            }

            .slides input[type="radio"]:nth-of-type(2):checked ~ .controls-visible label:nth-of-type(2) {
                background-color: #333;
            }

            .slides input[type="radio"]:nth-of-type(3):checked ~ .controls-visible label:nth-of-type(3) {
                background-color: #333;
            }

            .slides input[type="radio"]:nth-of-type(1):checked ~ .slide {
                transform: translatex(0%);
            }

            .slides input[type="radio"]:nth-of-type(2):checked ~ .slide {
                transform: translatex(-100%);
            }

            .slides input[type="radio"]:nth-of-type(3):checked ~ .slide {
                transform: translatex(-200%);
            }
    </style>
</head>


<body>
    <ul class="slides">

        <input type="radio" id="control-1" name="control" checked>
        <input type="radio" id="control-2" name="control">
        <input type="radio" id="control-3" name="control">

        <li class="slide">1</li>
        <li class="slide">2</li>
        <li class="slide">3</li>

        <div class="controls-visible">
          <label for="control-1"></label>
          <label for="control-2"></label>
          <label for="control-3"></label>
        </div>
      </ul>
</body>
</html>


<!-- 具体实现思路

使用label元素连接表单控件 文本标签
该技巧的另一个好处是控件有一个大的点击区域，因为点击标签或者控件都可以激活控件，
这对运动障碍用户有帮助。
注：类型为checkbox和radio的input元素的label标签在控件后面；

-->


<!--
    ~ 波浪符号找它同一层之后的元素

首先加入 .slides input[type="radio"]:nth-of-type(1):checked，判断当第一个 radio 按钮是已选择的状态，
加入 ~ 波浪符号，找它同一层之后，
.controls-visible 里面的 label:nth-of-type(1) ，选择到第一个 label，
设定 background-color 是深灰色。现在就可以看到点击第一个 label 的时候，显示为选中的样式：


最后，设定轮播图切换的效果，加入 .slides input[type="radio"]:nth-of-type(1):checked，~ 波浪符号 .slide。
这个意思是，当选中了第一个 radio 按钮之后，后面三张 .slide 的样式。
由于我们本身已经将三张 slide 横向排列好，所以只需要因应 radio 按钮，将三个 slide 向左移动特定的距离就可以。

当选择了第一个 radio 按钮时，将 transform 设定为 translatex(0%)。
当选中了第二个 radio 按钮时，将 transform 设定为 translatex(-100%)，即是向左移动一倍的宽度，就可以将第二张轮播图显示出来。
当选中了第三个 radio 按钮时，将 translatex() 设定为 -200%，这样就可以了。
-->