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

FIDDLE

我需要什么：

我希望第一行滑入，然后退出。在第一行之后，第二行应该做同样的事情。

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

我该怎么做？

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 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> {1}}添加课程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的原因），然后调用将循环的setInterval每4秒钟一次。

JSFiddle Demo 3

Answer 2

FIDDLE

我将你的逻辑移到了一个单独的函数中。 animate（）方法接受一个回调，它将改变'active'li，然后再次调用自己。这会给你无限循环。

    function slide() {
    var activeElement = $('li.active');
    $('.active').animate({
        'left': '0px'
    }, 500).delay(500).animate({
        'left': '-300px'
    }, 500, function() {
        var nextActiveElement = activeElement.next('li');
        activeElement.removeClass('active');
        if (nextActiveElement.length < 1) {
            nextActiveElement = $('li').first();
        }
        nextActiveElement.addClass('active');
        slide();
    });
}

slide();

Answer 3

您可以使用jquery回调对此进行归档：

function showLi(){
$('#textSlider ul li').each(function(index, value){
    setTimeout(function(){
        $(value).animate({'left': '0px'},500).delay(500).animate({'left': '0px'},500).animate({'left':'-300px'},500);
    }, index*2000);
});
}

showLi();
setInterval(showLi, $("#textSlider ul li").length*2000);

请参阅http://api.jquery.com/jQuery.each/

索引用于延迟超时。

检查分叉小提琴：

http://jsfiddle.net/3Dwkz/4/

幻灯片文本输入和输出

3 个答案: