javascript - 如何仅使用 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>

TLDR:重要说明

• 确保至少有一个 input(type="radio")是checked默认情况下，否则整个轮播将被隐藏。
• 隐藏输入单选框并使用标签作为上一个/下一个按钮
• 确保 labels正确定位上一个/下一个 radio 输入(请参阅最后的标签部分了解如何进行定位)
• 当其对应的输入 radio 为:checked 时显示图像
• 使用可爱的小猫图片

说明

基本的 HTML 结构应该是这样的:

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

div#holder将保留我们所有的内容。然后，我们将所有单选按钮、标签和图像分组到 div.group 下。 .这确保我们的 radio 输入不会受到破坏性干扰(双关语)。

关键在于选择器(和标签——请务必阅读该部分)

首先，我们将隐藏我们的单选按钮——反正它们很丑:

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

我们将永远不必单击单选按钮。相反，我们将设置标签样式并添加目标(for 属性)，以便它们将点击重定向到适当的单选输入 block 。

我们的大部分标签都应该隐藏:

div.group label {
    display: none;
}

^{(我将省略所有美学样式，以使样式更易于理解。您可以在堆栈片段中看到更好看的版本。)}

除了打开的 radio 输入旁边的那些，或 :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;
}

巴津加!现在我们的 carousel 应该是 完全 大部分功能了，尽管有点丑。让我们将标签移动到正确的位置:

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 的 radio 输入的 n , label.previous会有一个 for (n - 1) % M 的属性和 label.next会有一个 for (n + 1) % M 的属性, 其中M是轮播中的图像数量。

额外

如果您使用的是 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]}"
                )