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

Question

我是新来的jQuery和堆栈溢出，所以我会尽量具体，但请耐心与我。我试图从头开始创建一个带有关联链接的文本滑块，使用模数遍历列表并重复。

这里是我的工作代码：

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

<ul id="text"> 
<li id="textBody">Suffering is not a result of physical pain alone. It can be compounded by changes in one's life, and changes in the self. <em>We understand, and we can help.</em></li> 
<li id="textFamily">Aggressive assessment of physical symptoms &amp; pain in the body are key to support <em>the best possible quality of life</em>.</li> 
<li id="textFunction">Chronic pain &amp; illness may affect your role in your family. We work with you and your family as you confront those changes.</li> 
<li id="textPsyche">Chronic pain and illness make even everyday activities challenging. We will help you maintain independence and physical function.</li> 
<li id="textSuffering">Changes in the physical body mean changes in the self. We will provide support as you navigate those changes in the psyche.</li> 
</ul> 
<ul id="vivid_buttons"> 
<li><a href="#" id="buttonBody">BODY</a></li> 
<li><a href="#" id="buttonFamily" class="active">FAMILY</a></li> 
<li><a href="#" id="buttonFunction">FUNCTION</a></li> 
<li><a href="#" id="buttonPsyche">PSYCHE</a></li> 
<li><a href="#" id="buttonSuffering">SUFFERING</a></li> 
</ul> 

$(document).ready(function() { 

    function fadeAndMove() { 
     var nextLi = $("#text > li:nth-child(" + i % 5 + ")"); 
     var nextA = $("#vivid_buttons > li:nth-child(" + i % 5 + ") > a"); 
     nextLi.fadeIn(1000, function() { 
      $("#vivid_buttons > li > a").removeClass("active"); 
      nextA.addClass("active"); 
      setTimeout(function() { 
       nextLi.fadeOut(1000); 
      }, 4000); 
     }); 
    } 

    for (i = 1; i < 7; i++) { 
     fadeAndMove($("#text")); 
    } 
}); 

在简单的语言，我想在第一个列表一句褪色，并突出显示相应的链接在底部列表上。然后我希望它淡出并移动到下一个项目。我想我可以使用模数（％）和for循环遍历并创建一个无限循环，但是当我把它放在它就像它一次执行所有内容，而不是迭代（淡入和淡出）为每个项目。

我知道这很混乱，但我会很感激我能得到的任何帮助。

Answer 1

摆脱for循环，并让setTimeout调用fadeAndMove()函数，传递当前索引。

例子：http://jsfiddle.net/drWhE/

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

Answer 2

一切都在动画曾经因为你的主循环保持运行而你淡出定时器等待四秒钟。

示意性地，它是这样的（每一行代表一秒）：

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. 

为了解决这个问题，就需要链fadeAndMove()下次调用你的延迟功能淡出当前项目之后：

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

（因为这是一个延迟呼叫，它不是递归无限循环不会破坏堆栈。）

Answer 3

这里有一个方式得到你要找的东西：

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

这里的the fiddle。

And ...橙色酒吧告诉我帕特里克dw击败了我类似的东西。好吧，无论如何，这是它。