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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

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

我该如何做到这一点？

回答：

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

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

演示版

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正确定向上一个/下一个无线电输入（有关如何进行定向，请参见末尾的标签部分）

  • 当其对应的输入广播为 :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在转盘图像的数量。

回答：

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

以上是 如何仅使用CSS制作图像轮播？ 的全部内容， 来源链接： utcz.com/qa/406428.html

回到顶部