这很容易！只需使用单选按钮和目标标签。
单选按钮的（必要的）行为是一次只能选择一个按钮，就像轮播中的图像一样。
演示版
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>
基本的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"><</label>
<label class="next" for="2">></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 <
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]}"
)
602392714
清零编程群