Jquery 滑入和滑出文本

我对滑入文本滑块有问题：

HTML:

CSS:

我需要的是：

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

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

---

如何做到这一点？

您可以使用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);

看

索引用于延迟超时

检查叉式小提琴：

---

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

这将每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

检查它后面是否有另一个

，如果没有，则返回到第一个
以添加类
活动


最后如果希望第一个循环与其他循环不同，可以执行以下操作：

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秒循环一次


我把你的逻辑移到了一个单独的函数中。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();

函数幻灯片（）{
var-activeElement=$（'li.active'）；
$（'.active'）。设置动画({
“左”：“0px”
}，500）。延迟（500）。设置动画({
'左'：'-300px'
}，500，函数（）{
var nextActiveElement=activeElement.next（'li'）；
activeElement.removeClass（'active'）；
如果（nextActiveElement.length<1）{
nextActiveElement=$（'li'）.first（）；
}
nextActiveElement.addClass（'active'）；
幻灯片（）；
});
}
幻灯片（）；
您是否尝试过
setInterval
？这会让你一遍又一遍地重复一些东西。不过我会的，谢谢！对于老年退休金计划的问题，这是正确的答案——我有一种感觉，当他需要反复浏览一个不止两件事情的列表时，他会再次询问。当心——否则，这就是他正在寻找的答案，非常感谢你。回答得很好，您的代码也可以自定义。请注意，还有一个问题-我想让间隔变长，但是第一个循环（开始一个）的开始应该比后面的循环快得多…我该怎么做？它可以处理任意多的li。这里是一个更新与4李的小提琴非常感谢你的回答。喜欢额外的功能吗
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);

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

    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();