的JavaScript-jQuery的幻灯片李左

我正在制作幻灯片查看器,显示的ul中有5 lis.我如何使用j查询在li上向左滑动,以便不再看到左侧的li并显示未看到的一个？

2011年6月30日更新

当我真正接触jquery时,我回答了这个问题.从那以后我学到了一些东西,并且在第二天晚上对这个答案进行了投票之后,我仔细考虑了一下这个答案.最初,我对下一个元素如何快速进入并或多或少地打破常规感到不满意. (see here).我觉得处理此问题的适当方法是在第一次切换后调用回调.

更新的jQuery

$('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);
        });
});

请参阅更新的live example.

.toggle()

.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.

旧

JQUERY

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

的HTML

<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>

和一个小提琴http://jsfiddle.net/EZpMf/

这将减少刚性,并使用更少的代码.我也认为它很可读.

这是选择大于4(从零开始)的li并将其隐藏.接下来,当您单击该按钮时,它会简化第一个按钮,然后将其插入末尾,然后将第四个按钮简化并插入其中.我想您可以自定义动画.使用切换和jquery-ui提供的一些动画效果.但这是一个简单的例子.

编辑
在尝试改善此问题后,我问了自己的问题.我正在粘贴答案提琴

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

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

http://jsfiddle.net/67Wu7/

的JavaScript-jQuery的幻灯片李左

相关推荐