分类导航

jQuery 发布时间：2022-04-19 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了jquery – 幻灯片文本输入和输出，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我在“文本”滑块中遇到问题：

<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>添加活动类…

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