幻灯片文本输入和输出

Question

我在"文本"滑块中遇到问题:

HTML:

<div id="textSlider">
    <ul>
         <li class="active">Doors | Windows | Showers</li>
         <li>Superb Fenestration | Superior Service</li>
    </ul>
</div>
<div class="clear"></div>

JS:

$('#textSlider ul li').each(function(){
    setTimeout(function(){
        $('.active').animate({'left': '0px'},500).delay(500).animate({'left': '-300px'},500);
        $(this).removeClass('active');
    }, 2000);

});

CSS:

#textSlider{
    position: relative;
    left: 0;
}
ul{
    list-style: none;
}
ul li{
    position: relative;
    left: -300px;
}
.clear{
    clear: both;
}

小提琴

我需要的:

我希望第一行插入,然后输出.在第一行之后,第二行应该做同样的事情.

然后该函数应该重复整个过程

我怎么做？

Answer 1

您可以将JavaScript更改为:

setInterval(function(){
    $('.active').animate({'left': '0px'},500)
      .delay(500)
      .animate({'left': '0px'},500)
      .animate({'left':'-300px'},500)
      .removeClass('active')
      .siblings('li')
      .addClass('active');
}, 2000);

JSFiddle演示

这将每2秒无限循环......

请记住,它只会迭代2个元素(如您的示例所示),如果您需要迭代n多个元素,您可以尝试这样做:

setInterval(function(){
    var $current = $('.active').animate({'left': '0px'},500)
        .delay(500)
        .animate({'left': '0px'},500)
        .animate({'left':'-300px'},500)
        .removeClass('active');

    if($current.next('li').length > 0) {
        $current.next('li').addClass('active');
    } else {
        $current.siblings('li:eq(0)').addClass('active');
    }
}, 2000);

基本上缓存$current变量上的当前活动元素,使用它if来检查<li>后面是否有另一个,并且它没有,返回到第一个<li>添加类active...

JSFiddle演示2

最后,如果你想让第一个循环与其他循环不同,你可以这样做:

setTimeout(function(){
    loopList();
    setInterval(loopList,4000);
}, 1);

function loopList(){
    var $current = $('.active').animate({'left': '0px'},500)
    .delay(500).animate({'left': '0px'},500)
    .animate({'left':'-300px'},500)
    .removeClass('active');

    if($current.next('li').length > 0) {
        $current.next('li').addClass('active');
    } else {
        $current.siblings('li:eq(0)').addClass('active');
    }
}

在这种情况下,你将从第一次立即调用第一次迭代setTimeout(这是本例中0的原因),然后调用setInterval将每4秒循环一次.

JSFiddle演示3