使用javascript模数通过for循环遍历文本滑块

我是jQuery和堆栈溢出的新手，所以我会尝试具体，但请耐心等待。 我正在尝试从头开始创建一个带有相关链接的文本滑块，使用模数迭代列表并重复。

这是我正在使用的代码：

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

 
 
Suffering is not a result of physical pain alone. It can be compounded by changes in one's life, and changes in the self. We understand, and we can help.
 
Aggressive assessment of physical symptoms & pain in the body are key to support the best possible quality of life.
 
Chronic pain & illness may affect your role in your family. We work with you and your family as you confront those changes.
 
Chronic pain and illness make even everyday activities challenging. We will help you maintain independence and physical function.
 
Changes in the physical body mean changes in the self. We will provide support as you navigate those changes in the psyche.
 
 
 
BODY
 
FAMILY
 
FUNCTION
 
PSYCHE
 
SUFFERING
  

 $(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()将下一个调用链接到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);​ 

这是小提琴 。

并且…橙色酒吧告诉我帕特里克dw打败我类似的东西。 好吧，无论如何它在这里。