如何仅使用CSS制作图像轮播？

Question

我希望制作一个图像轮播，用户可以在其中通过单击箭头在图像之间切换。

但是，我只能使用HTML和CSS，而不能使用JavaScript（因此也不能使用jQuery）。我只需要基本设置；平滑过渡等不是必需的。

我该如何做到这一点？

Answer 1

这很容易！只需使用单选按钮和目标标签。

单选按钮的（必要的）行为是一次只能选择一个按钮，就像轮播中的图像一样。

演示版

div.wrap2 {

  float: left;

  height: 500px;

  width: 422px;

}

div.group input {

  display: none;

  left: -100%;

  position: absolute;

  top: -100%;

}

div.group input ~ div.content {

  border: solid 1px black;

  display: none;

  height: 350px;

  margin: 0px 60px;

  position: relative;

  width: 300px;

}

div.group input:checked ~ div.content {

  display: block;

}

div.group input:checked ~ label.previous,

div.group input:checked ~ label.next {

  display: block;

}

div.group label {

  background-color: #69c;

  border: solid 1px black;

  display: none;

  height: 50px;

  width: 50px;

}

img {

  left: 0;

  margin: 0 auto;

  position: absolute;

  right: 0;

}

p {

  text-align: center;

}

label {

  font-size: 4em;

  margin: 125px 0 0 0;

}

label.previous {

  float: left;

  padding: 0 0 30px 5px;

}

label.next {

  float: right;

  padding: 0 5px 25px 0;

  text-align: right;

}


<div class="wrap">

  <div class="wrap2">

    <div class="group">

      <input type="radio" name="test" id="0" value="0">

      <label for="4" class="previous">&lt;</label>

      <label for="1" class="next">&gt;</label>

      <div class="content">

        <p>panel #0</p>

        <img src="http://i.stack.imgur.com/R5yzx.jpg" width="200" height="286">

      </div>

    </div>

    <div class="group">

      <input type="radio" name="test" id="1" value="1">

      <label for="0" class="previous">&lt;</label>

      <label for="2" class="next">&gt;</label>

      <div class="content">

        <p>panel #1</p>

        <img src="http://i.stack.imgur.com/k0Hsd.jpg" width="200" height="139">

      </div>

    </div>

    <div class="group">

      <input type="radio" name="test" id="2" value="2">

      <label for="1" class="previous">&lt;</label>

      <label for="3" class="next">&gt;</label>

      <div class="content">

        <p>panel #2</p>

        <img src="http://i.stack.imgur.com/Hhl9H.jpg" width="140" height="200">

      </div>

    </div>

    <div class="group">

      <input type="radio" name="test" id="3" value="3" checked="">

      <label for="2" class="previous">&lt;</label>

      <label for="4" class="next">&gt;</label>

      <div class="content">

        <p>panel #3</p>

        <img src="http://i.stack.imgur.com/r1AyN.jpg" width="200" height="287">

      </div>

    </div>

    <div class="group">

      <input type="radio" name="test" id="4" value="4">

      <label for="3" class="previous">&lt;</label>

      <label for="0" class="next">&gt;</label>

      <div class="content">

        <p>panel #4</p>

        <img src="http://i.stack.imgur.com/EHHsa.jpg" width="96" height="139">

      </div>

    </div>

  </div>

</div>

• 请确保至少有一个input(type=”radio”)是checked默认，或整个传送带将被隐藏。
• 隐藏输入单选并使用标签作为上一个/下一个按钮
• 确保labels正确定向上一个/下一个无线电输入（有关如何进行定向，请参见末尾的标签部分）
• 当其对应的输入广播为 :checked
• 使用可爱的小猫图片

Explanation

基本的HTML结构如下所示：

div#holder
    div.group
        input(type="radio")
        label.previous
        label.next
        div.content
            img
    div.group
        // ... repeat as necessary

div#holder将保留我们所有的内容。然后，我们将单选按钮，标签和图像归为一个组div.group。这可以确保我们的无线电输入不受破坏性干扰（双关）的影响。

关键在选择器中（以及标签-请务必阅读该部分）

首先，我们将隐藏单选按钮-无论如何它们都很丑陋：

div.group input {
    display: none;
    position: absolute;
    top: -100%;
    left: -100%;
}

我们将不再需要单击单选按钮。相反，我们将设置标签样式并添加目标（for属性），以便它们将点击重定向到适当的单选框。

我们的大多数标签都应该隐藏：

div.group label {
    display: none;
}

（我将省略所有美学样式，以便使样式更易于理解。您可以在堆栈片段中看到外观更好的版本。）

除了已打开的无线电输入旁边的那些，或 :checked

div.group input:checked ~ label.previous,
div.group input:checked ~ label.next {
    display: block;
}

此外，div.content还应显示以下选中的输入：

div.group input:checked ~ div.content {
    display: block;
}

但是，当未选中单选按钮时，div.content应将其隐藏：

div.group input ~ div.content {
    display: none;
    position: relative;
}

现在我们的轮播应该充分地主要功能，尽管有点难看。让我们将标签移到正确的位置：

label.previous { float: left; }
label.next { float: right; }

并将我们的图片放在各自的div中：

img {
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
}

最后一步是如何设置标签：

<input type="radio" id="1">
<label class="previous" for="0">&lt;</label>
<label class="next" for="2">&gt;</label>

注意如何给出一个无线电输入id的n，该label.previous会拥有for的属性(n - 1) % M和label.next将有一个for属性(n + 1) % M，其中M在转盘图像的数量。

Extra

如果您使用的是Jade（或其他模板引擎），则可以使用简单的for循环进行设置，如下所示：

div.wrap2
    - var imgs = [[200, 286], [200, 139], [140, 200], [200, 287], [96, 139]];
    - for (var i = 0; i < imgs.length; i++)
        div.group
            input(type="radio" name="test" id="#{i}" value="#{i}" checked="#{input == 3}")
            label(for="#{(i - 1 + imgs.length) % imgs.length}").previous &lt;
            label(for="#{(i + 1) % imgs.length}").next &gt;
            div.content
                p panel ##{i}
                img(src="http://placekitten.com/g/#{imgs[i].join('/')}"
                    height="#{imgs[i][1]}"
                    width="#{imgs[i][0]}"
                )