我试图制作一个超级简单的ul li(内容)滑块。我的目标是添加prev和next按钮。
两个按钮工作正常,但我的问题是滑动效果。下一个滑动非常酷,但是前一个按钮不是,我无法弄清楚如何让它像下一个滑动按钮一样。
$("ul li:gt(0)").hide();
$('#Next').click(function(){
$('ul > li:first')
.slideUp(1000)
.next()
.slideDown(1000)
.end()
.appendTo('ul');
});
$('#Prev').click(function(){
$('ul > li:last')
.slideDown(1000)
.prev()
.slideUp(1000)
.end()
.prependTo('ul');
$("ul li:gt(0)").slideUp();
});
li {
list-style: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<a id="Prev">Prev</a>
<a id="Next">Next</a>
试试下面的内容。添加$("ul li:gt(0)").slideUp(1000);
。
$("ul li:gt(0)").hide();
$('#Next').click(function(){
$('ul > li:first')
.slideUp(1000)
.next()
.slideDown(1000)
.end()
.appendTo('ul');
});
$('#Prev').click(function(){
$('ul > li:last')
.slideDown(1000)
.prev()
.slideUp(1000)
.end()
.prependTo('ul');
$("ul li:gt(0)").slideUp(1000);
});
li {
list-style: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<a id="Prev">Prev</a>
<a id="Next">Next</a>