jquery - 滑入和滑出文本

我在文本滑块中遇到幻灯片问题:

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

FIDDLE

我需要的:

我希望第一行滑入，然后滑出。
在第一行之后，第二行也应该这样做。

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

我怎么做？

最佳答案

您可以将 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 Demo

这将每 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 Demo 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 的原因)，然后调用将每 4 秒循环一次的 setInterval。

JSFiddle Demo 3

关于jquery - 滑入和滑出文本，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17031422/