Jquery 使用javascript模数通过for循环迭代文本滑块

我对jQuery和堆栈溢出还不熟悉，所以我会尽量具体一些，但请耐心听我说。我正在尝试从头创建一个文本滑块，其中包含相关链接，使用模数在列表中迭代并重复

以下是我正在使用的代码：

ul#text { position: relative; margin-bottom: 40px; height: 40px; }
ul#text li { position: absolute; display: none; }
.active { font-weight: bold; }

痛苦不仅仅是身体疼痛的结果。生活中的变化和自我的变化会使它复杂化。我们理解，我们可以提供帮助
积极评估身体症状；身体疼痛是维持最佳生活质量的关键
慢性疼痛；疾病可能会影响你在家庭中的角色。在你们面对这些变化时，我们与你们和你们的家人一起工作
慢性疼痛和疾病甚至使日常活动都充满挑战。我们将帮助您保持独立性和身体机能
身体的变化意味着自我的变化。我们将为你提供支持，帮助你在心灵中驾驭这些变化

$（文档）.ready（函数（）{
函数fadeAndMove（）{
var nextLi=$（“#text>li:n子项（“+i%5+”）；
var nextA=$（“#生动的按钮>li:n子项（“+i%5+”）>a”）；
nextLi.fadeIn（1000，函数（）{
$（“#生动的按钮>li>a”）.removeClass（“活动”）；
nextA.addClass（“活动”）；
setTimeout（函数（）{
次衰减（1000）；
}, 4000);
});
}
对于（i=1；i<7；i++）{
fadeAndMove（$（“#文本”）；
}
});

在简单的语言中，我想淡入第一个列表中的一个句子，并突出显示底部列表中相应的链接。然后，我希望它淡出并移动到下一个项目

我想我可以使用模数（%）和for循环来迭代并创建一个无限循环，但当我把它放进去时，它就像是一次执行所有东西，而不是对每个项目进行迭代（淡入淡出）

---

我知道这会让人困惑，但如果能得到任何帮助，我将不胜感激。

摆脱

for

循环，让setTimeout调用

fadeAndMove（）

函数，传递当前索引

示例：

---

所有的东西都会立刻产生动画，因为主循环会一直运行，而衰减计时器会等待四秒钟

示意图上是这样的（每行代表一秒钟）：

要解决此问题，您需要在淡出延迟函数中的当前项后立即链接对

fadeAndMove（）

的下一个调用：

nextLi.fadeIn(1000, function () {
    $("#vivid_buttons > li > a").removeClass("active");
    nextA.addClass("active");
    setTimeout(function () {
        nextLi.fadeOut(1000);
        fadeAndMove(i + 1);
    }, 4000);
});

---

（因为这是一个延迟调用，所以它不是递归的。无限循环不会破坏堆栈。）

这里有一种方法可以获得您想要的：

var $sentence_set = $('ul#text > li');
var $link_set = $('ul#vivid_buttons > li');

var highlight = function(which) {
  var el = $sentence_set.eq(which - 1);
  var position = el.prevAll('li').length;
  $link_set.removeClass('active').eq(position).addClass('active');
  $sentence_set.eq(position).siblings().fadeOut().end().fadeIn();
}

var loopcount = 0;
var repeater = setInterval(function() {
  var theList = $('#text > li');
  highlight(++loopcount % $sentence_set.length);
}, 4000);​

给你

---

而且。。。橙色条告诉我patrick dw在类似的事情上击败了我。好吧，反正是这样。

p.S.如果我为i设置了一个特定的值，则基函数可以工作。当我抛出for循环让它重复时，事情就失控了。再次感谢！我假设

fadeAndMove（）

实际上接受了一个参数

I

，对吗？

$(document).ready(function () {

       // cache the LI elements
    var $lis = $("#text > li");
    var $aLis = $("#vivid_buttons > li");

    function fadeAndMove( currentIndex ) {
        var nextIndex = (currentIndex + 1) % 5;
        var nextLi = $lis.eq( nextIndex );
        nextLi.fadeIn(1000, function () {
            $aLis.eq( currentIndex ).children('a').removeClass("active");
            $aLis.eq( nextIndex ).children('a').addClass("active");
            setTimeout(function () {
                nextLi.fadeOut(1000, function() {
                      // Call fadeAndMove() passing nextIndex as the new currentIndex
                    fadeAndMove( nextIndex );
                });
            }, 4000);
        });
    }
       // Get it started on index 0
    fadeAndMove( 0 );
});

li1.fadeIn
li2.fadeIn  |
li3.fadeIn  | |
li4.fadeIn  | | |      Timers
li5.fadeIn  V | | |    wait four
li1.fadeOut   V | | |  seconds
li2.fadeOut     V | |
li3.fadeOut       V |
li4.fadeOut         V
li5.fadeOut
li1.fadeIn
li2.fadeIn
.
.
.
etc, etc, ad nauseam.

nextLi.fadeIn(1000, function () {
    $("#vivid_buttons > li > a").removeClass("active");
    nextA.addClass("active");
    setTimeout(function () {
        nextLi.fadeOut(1000);
        fadeAndMove(i + 1);
    }, 4000);
});

var $sentence_set = $('ul#text > li');
var $link_set = $('ul#vivid_buttons > li');

var highlight = function(which) {
  var el = $sentence_set.eq(which - 1);
  var position = el.prevAll('li').length;
  $link_set.removeClass('active').eq(position).addClass('active');
  $sentence_set.eq(position).siblings().fadeOut().end().fadeIn();
}

var loopcount = 0;
var repeater = setInterval(function() {
  var theList = $('#text > li');
  highlight(++loopcount % $sentence_set.length);
}, 4000);​