1
我可以将此滑块的按钮变成两个箭头“Next - Previous”吗? 在这种情况下,每个幻灯片都有一个按钮,我只能使用两个按钮,但是如何将输入转换为下一个和前一个?用一个简单的JS或我可以解决问题与CSS?将滑块变换按钮变为箭头
<div id="slider-wrapper">
<input type="radio" id="button-1" name="buttons" checked="checked"/>
<label for="button-1"></label>
<input type="radio" id="button-2" name="buttons"/>
<label for="button-2"></label>
<input type="radio" id="button-3" name="buttons"/>
<label for="button-3"></label>
<input type="radio" id="button-4" name="buttons"/>
<label for="button-4"></label>
<input type="radio" id="button-5" name="buttons"/>
<label for="button-5"></label>
<div id="slider">
<ul>
<li id="slide1">
<img src="images/img1.jpg" width="400" height="400" alt=""/> </li>
<li id="slide2">
<p>Slider Page Two<br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
</li>
<li id="slide3">
<p>Slider Page Three<br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
</li>
<li id="slide4">
<p>Slider Page Four<br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
</li>
<li id="slide5">
<p>Slider Page Five<br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
</li>
</ul>
</div>
</div>
小提琴
http://jsfiddle.net/tMxp5/274/
谢谢。
太感谢你了!我不知道我该如何停止在最后一页,也许我会找到一个教程!或者有人可以帮助我! TY –
很高兴您觉得这有帮助,请您接受我的答案和/或将其标记为有用。 – Zak