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

2024-04-25

我正在寻找制作一个图像轮播，用户可以通过单击箭头在图像之间切换。例如：

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

我怎样才能做到这一点？

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

单选按钮具有（必要的）行为，即在任何时间只允许选择一个 - 就像我们的轮播中的图像一样。

Demo

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="https://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="https://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="https://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="https://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="https://i.stack.imgur.com/EHHsa.jpg" width="96" height="139">
      </div>
    </div>
  </div>
</div>

TLDR：重要说明

确保至少有一项input(type="radio") is checked默认情况下，否则整个轮播将被隐藏。
隐藏输入单选按钮并使用标签作为上一个/下一个按钮
确保labels正确定位上一个/下一个无线电输入（请参阅最后的标签部分，了解如何进行定位）
当其对应的输入无线电为时显示图像: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。这可以确保我们的无线电输入不会受到破坏性干扰（双关语）。

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

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

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

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

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

div.group label {
    display: none;
}

^{(I will omit all aesthetic styling, so as to make the styling easier to understand. You can see the better-looking version in the stack snippet.)}

除了已打开的无线电输入旁边的那些，或: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 of n, the label.previous将有一个for的属性(n - 1) % M和label.next将有一个for的属性(n + 1) % M, where 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]}"
                )

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

jQuery

html

css