这很容易！只需使用单选按钮和目标标签。
单选按钮的（必要的）行为是一次只能选择一个按钮，就像轮播中的图像一样。
演示版
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 > <div > <div > <input type="radio" name="test" id="0" value="0"> <label for="4" ><</label> <label for="1" >></label> <div > <p>panel #0</p> <img src="http://i.stack.imgur.com/R5yzx.jpg" width="200" height="286"> </div> </div> <div > <input type="radio" name="test" id="1" value="1"> <label for="0" ><</label> <label for="2" >></label> <div > <p>panel #1</p> <img src="http://i.stack.imgur.com/k0Hsd.jpg" width="200" height="139"> </div> </div> <div > <input type="radio" name="test" id="2" value="2"> <label for="1" ><</label> <label for="3" >></label> <div > <p>panel #2</p> <img src="http://i.stack.imgur.com/Hhl9H.jpg" width="140" height="200"> </div> </div> <div > <input type="radio" name="test" id="3" value="3" checked=""> <label for="2" ><</label> <label for="4" >></label> <div > <p>panel #3</p> <img src="http://i.stack.imgur.com/r1AyN.jpg" width="200" height="287"> </div> </div> <div > <input type="radio" name="test" id="4" value="4"> <label for="3" ><</label> <label for="0" >></label> <div > <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 for="0"><</label><label for="2">></label>
注意如何给出一个无线电输入
id的
n，该
label.previous会拥有
for的属性
(n - 1) % M和
label.next将有一个
for属性
(n + 1) % M，其中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 < 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]}" )
