滑块转换按钮为箭头
滑块转换按钮为箭头
提问于 2015-05-15 07:28:07
我能把这个滑块的按钮变成两个箭头“下一个”吗?！在这种情况下，我对每一张幻灯片都有一个按钮，我只能使用两个按钮，但是如何将输入转换为下一个和前一个呢？！用一个简单的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/
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-05-15 07:36:24
使用一些jQuery，我想出了这个，显然它需要更多的工作，例如，当它通过最后一个滑块页面时停止。您可能也应该使用transform: translate3d()而不是left，因为过渡将更加顺利，特别是在智能手机上。
http://jsfiddle.net/tMxp5/275/
var left = 0;
$('#button-1').click(function() {
left = left + 100;
$('#slider ul').css({left: left + '%'});
});
$('#button-2').click(function() {
left = left - 100;
$('#slider ul').css({left: left + '%'});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30253900
复制相关文章
相似问题
腾讯云开发者
