jquery简单的ul li内容滑块答案

【问题标题】：jquery simple ul li content sliderjquery简单的ul li内容滑块
【发布时间】：2016-09-30 09:05:50
【问题描述】：

我试图制作一个超级简单的 ul li (content) 滑块。我的目标是添加 prev 和 next 按钮。

两个按钮都可以正常工作，但我的问题是滑动效果。 next 滑动很酷，但是 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>

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

试试下面的。添加$("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>

【讨论】：

@pedram 现在检查一下。