如何制作一个只有CSS的图像轮播？ [英] How can I make an image carousel with only CSS?
问题描述
我想要制作图片轮播，用户可以通过点击箭头在图片之间切换。例如：
但是，我只能使用HTML和CSS-没有JavaScript（因此，jQuery）。我只需要基本的设置;
如何完成此操作？
很简单！只需使用单选按钮和目标标签。
单选按钮有必要的行为，只允许在任一时间选择 - 就像我们的轮播图像
演示
div.wrap2 {float：left ; height：500px; width：422px;} div.group input {display：none;左：-100％; position：absolute; top：-100％;} div.group input〜div.content {border：solid 1px black; display：none; height：350px; margin：0px 60px;位置：相对; 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。组标签{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 =radioname =testid =0value =0> < label for =4class =previous>& lt;< / label> < label for =1class =next>& gt;< / label> < div class =content> < p> panel＃0< / p> < img src =http://i.stack.imgur.com/R5yzx.jpgwidth =200height =286> < / div> < / div> < div class =group> < input type =radioname =testid =1value =1> < label for =0class =previous>& lt;< / label> < label for =2class =next>& gt;< / label> < div class =content> < p> panel＃1< / p> < img src =http://i.stack.imgur.com/k0Hsd.jpgwidth =200height =139> < / div> < / div> < div class =group> < input type =radioname =testid =2value =2> < label for =1class =previous>& lt;< / label> < label for =3class =next>& gt;< / label> < div class =content> < p> panel＃2< / p> < img src =http://i.stack.imgur.com/Hhl9H.jpgwidth =140height =200> < / div> < / div> < div class =group> < input type =radioname =testid =3value =3checked => < label for =2class =previous>& lt;< / label> < label for =4class =next>& gt;< / label> < div class =content> < p> panel＃3< / p> < img src =http://i.stack.imgur.com/r1AyN.jpgwidth =200height =287> < / div> < / div> < div class =group> < input type =radioname =testid =4value =4> < label for =3class =previous>& lt;< / label> < label for =0class =next>& gt;< / label> < div class =content> < p> panel＃4< / p> < img src =http://i.stack.imgur.com/EHHsa.jpgwidth =96height =139> < / div> < / div> < / div>< / div>
注释
- 确保至少有一个
输入（type =radio）默认选中，否则整个轮播将被隐藏。 - 隐藏输入无线电，使用标签作为上一个/ / li>
- 确保
标签正确定位上一个/下一个广播输入（请参阅最后一个标签部分，了解如何进行定位）
- 当其相应的输入收音机
时显示图片：checked - 使用可爱的小猫图片
说明
基本HTML结构应如下所示： p>
div＃holder
div.group
input（type =radio）
标签。 previous
label.next
div.content
img
div.group
// ...根据需要重复
div＃holder 将保留我们的所有内容。然后，我们将将 div.group 下的单选按钮，标签和图片分组。这确保我们的无线电输入不会受到破坏性干扰（双关语）。
键在选择器（和标签 - 确保阅读该部分）
首先，我们将隐藏我们的单选按钮 - 它们都是丑陋的：
div.group input {
display：none;
position：absolute;
top：-100％;
left：-100％;
}
我们不必点击单选按钮。相反，我们将对标签进行风格化并添加目标（用于属性），以便将点击重定向到相应的无线电输入块。
我们的大多数标签都应该隐藏：
div.group标签{
display：没有;
}
（我会省略所有的美学风格，样式更容易理解，你可以在堆栈片段中看到更好看的版本。）
除了在切换的无线电输入旁边的那些，或：checked
div.group input：checked〜label。 previous，
div.group input：checked〜label.next {
display：block;
}
此外， div.content 后面也应显示：
div.group输入：checked〜div.content {
display：block;但是，当未选中单选按钮时， div.content 应隐藏： div.group input〜div.content {
display：none;
position：relative;
}
Bazinga！现在我们的旋转木马应该完全大部分功能，虽然有点丑。让我们将标签移到正确的位置：
label.previous {float：left; }
label.next {float：right; }
将图片放在各自的div中：
img {
left：0;
margin：0 auto;
position：absolute;
right：0;
}
最后一步是如何设置标签：
< input type =radioid =1>
< label class =previousfor =0>& lt;< / label>
< label class =nextfor =2>& gt;< / label>
请注意，给定一个 id n ， label.previous 将会有 c> c的属性（n-1）％M 和 label.next 将有一个 （n + 1）％M 的 c>属性，其中 M
额外
如果您使用Jade（或其他模板引擎） ，你可以像这样用一个简单的for循环设置：
div.wrap2
- var imgs = [[200,286]，[200,139]，[140,200]，[200,287]，[96,139]];
- for（var i = 0; i div.group
input（type =radioname =testid =＃{i }value =＃{i}checked =＃{input == 3}）
label（for =＃{（i - 1 + imgs.length）％imgs.length}上一页&
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]}
）
I'm looking to make an image carousel, where a user can toggle between images, by clicking on arrows. For example:
However, I can only use HTML and CSS—no JavaScript (and, therefore, jQuery). I just need the basic setup; smooth transitions and the like are not necessary.
How can I go about accomplishing this?
解决方案 That's easy! Just use radio buttons and targeted labels.
Radio buttons have the (necessary) behavior of only allowing one to be selected at any one time—just like an image in our carousel.
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"><</label>
<label for="1" class="next">></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"><</label>
<label for="2" class="next">></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"><</label>
<label for="3" class="next">></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"><</label>
<label for="4" class="next">></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"><</label>
<label for="0" class="next">></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: Important notes
- Make sure at least one
input(type="radio") is checked by default, or the whole carousel will be hidden.
- Hide the input radios and use labels as the previous/next buttons
- Make sure the
labels correctly target the previous/next radio input (see labels section at the end on how to do the targeting)
- Show an image when its corresponding input radio is
:checked
- Use cute kitten pictures
Explanation
Here's what the basic HTML structure should look like:
div#holder
div.group
input(type="radio")
label.previous
label.next
div.content
img
div.group
// ... repeat as necessary
div#holder will hold all of our content in place. Then, we'll group our radio buttons, labels, and images all under a div.group. This makes sure our radio inputs don't suffer from destructive interference (pun).
The key is in the selectors (and the labels—make sure to read that section)
First, we'll hide our radio buttons—they're ugly anyway:
div.group input {
display: none;
position: absolute;
top: -100%;
left: -100%;
}
We won't ever have to click the radio buttons. Instead, we'll style our labels and add targets (for properties), so that they redirect the click to the appropriate radio input block.
Most of our labels should be hidden:
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.)
Except for those next to a radio input that is toggled on, or :checked
div.group input:checked ~ label.previous,
div.group input:checked ~ label.next {
display: block;
}
In addition, the div.content following a checked input should also be displayed:
div.group input:checked ~ div.content {
display: block;
}
However, when the radio button is not checked, div.content should be hidden:
div.group input ~ div.content {
display: none;
position: relative;
}
Bazinga! Now our carousel should be fully mostly functional, albeit a little ugly. Let's move our labels to the correct position:
label.previous { float: left; }
label.next { float: right; }
And center our images within their respective divs:
img {
left: 0;
margin: 0 auto;
position: absolute;
right: 0;
}
The last step is how you set up your labels:
<input type="radio" id="1">
<label class="previous" for="0"><</label>
<label class="next" for="2">></label>
Note how, given a radio input with an id of n, the label.previous will have a for attribute of (n - 1) % M and the label.next will have a for attribute of (n + 1) % M, where M is the number of images in the carousel.
Extra
If you're using Jade (or some other template engine), you can set it up with a simple for-loop like this:
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 <
label(for="#{(i + 1) % imgs.length}").next >
div.content
p panel ##{i}
img(src="http://placekitten.com/g/#{imgs[i].join('/')}"
height="#{imgs[i][1]}"
width="#{imgs[i][0]}"
)
这篇关于如何制作一个只有CSS的图像轮播？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
