Javascript jQuery幻灯片左

我正在制作一个幻灯片查看器，ul中有5个lis在显示。如何使用j query在li上向左滑动，使左侧的li不再显示，并显示其中一个未显示的li？

HTML

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>
<br/>
<button> next </button>

jQuery

$("li").filter(function(key) {
    return key < 5;
}).css("display", "inline");

$("button").click(function() {
    var lis = $("li");
    // place the first element at the end.
    var li = lis.first().detach().appendTo("ul");
    // show first 5
    $("li").filter(function(key) {
        return key < 5;
    }).css("display", "inline");
    // hide rest
    $("li").filter(function(key) {
        return key >= 5;
    }).css("display", "none");

});

$（“li”）.filter（函数（键）{
返回键<5；
}).css（“显示”、“内联”）；
$（“按钮”）。单击（函数（）{
var lis=$（“li”）；
//将第一个元素放在末尾。
var li=lis.first（）.detach（）.appendTo（“ul”）；
//前五名
$（“li”）.filter（函数（键）{
返回键<5；
}).css（“显示”、“内联”）；
//隐藏休息
$（“li”）.filter（函数（键）{
返回键>=5；
}).css（“显示”、“无”）；
});

于2011年6月30日更新 当我对这个问题还很陌生的时候，我就回答了这个问题。从那以后，我学到了一些东西，在前几天晚上这个答案被否决后，我把这个答案看了一遍。起初，我对下一个元素如何快速进入感到不满意，并或多或少打破了这一障碍。(). 我觉得处理这个问题的合适方法是在第一次切换后调用回调

更新的jquery 请参阅更新的

---

旧的

JQUERY

    $('li:gt(4)').css('display', 'none');
    $("button").click(function() {  
    $('li:first').fadeOut('fast').insertAfter('li:last')
    $('li:eq(4)').fadeIn(); });

HTML

---

这不是我需要的。我同时显示了5个lis。我希望所有的lis都向左滑动，这样li 1不会显示，而li 6会显示。我试过了。动画和幻灯片，但他们没有滑动它。slideUp有效，但我希望所有lis向左滑动，使第一个隐藏。。。

$('li:gt(4)').css('display', 'none');

    $("button").click(function() {
        $('li:first').insertAfter('li:last').toggle('clip', 100, function() {
            //called after the first .toggle() is finished
            $('li:eq(4)').toggle('scale', 100);
        });
});

.toggle( [duration,] [easing,] [callback] )
durationA string or number determining how long the animation will run.
easingA string indicating which easing function to use for the transition.
callbackA function to call once the animation is complete.

    $('li:gt(4)').css('display', 'none');
    $("button").click(function() {  
    $('li:first').fadeOut('fast').insertAfter('li:last')
    $('li:eq(4)').fadeIn(); });

<ul>
    <li class="slider"> Item-1 </li>
    <li class="slider"> Item-2 </li>
    <li class="slider"> Item-3 </li>
    <li class="slider"> Item-4 </li>
    <li class="slider"> Item-5 </li>
    <li class="slider"> Item-6 </li>
    <li class="slider"> Item-7 </li>
    <li class="slider"> Item-8 </li>
    <li class="slider"> Item-9 </li>
    <li class="slider"> Item-10 </li>
</ul>


<button> Next > </button>

$('li:gt(4)').css('display', 'none');

$("button").click(function() {  
    $('li:first').insertAfter('li:last').toggle('clip',100);
    $('li:eq(4)').toggle('scale', 100);
});