使用javascript模块在for循环中遍历文本滑块 [英] Using javascript modulus to iterate through text slider with for loop

问题描述

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

这是我正在使用的代码：

  ul＃text {position：relative; margin-bottom：40px; height：40px; } 
 ul＃text li {position：absolute;显示：无} 
 .active {font-weight：bold; } 
  

 < ul ID = 文本 > 
< li id =textBody>痛苦不仅仅是身体上的痛苦。人生的变化和自我的变化可以加剧它的复杂性。 < em>我们了解，我们可以提供帮助。< / em>< / li> 
< li id =textFamily>积极评估身体症状&身体的疼痛是支持生命最佳质量的关键< / em>。< / li> 
< li id =textFunction>慢性疼痛&疾病可能会影响你在家庭中的角色。我们与您和您的家人一起面对这些变化。< / li> 
< li id =textPsyche>慢性疼痛和疾病甚至使日常活动具有挑战性。我们将帮助您保持独立性和身体机能。< / li> 
< li id =textSuffering>身体的变化意味着自我的变化。我们将在您浏览心理变化时提供支持。< / li> 
< / ul> 
< ul id =vivid_buttons> 
< li>< a href =＃id =buttonBody> BODY< / a>< / li> 
< li>< a href =＃id =buttonFamilyclass =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（）{$ b $ （1000）; 
}，4000）; 
}）; 
} 
 
（i = 1; i <7; i ++） {
 fadeAndMove（$（＃text））; 
} 
}）; 
  

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

我以为我可以使用模数（％）和一个for循环遍历并创建一个无限循环，但是当我把它放在它就像它一次执行一切，而不是迭代（淡入和淡出）每个项目。

我知道这是混乱，但我会很感激任何帮助，我可以得到。

解决方案

摆脱为循环，只需要setTimeout调用 fadeAndMove（）函数，传递当前索引。

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

$ b $

  $（document）.ready（function（）{
 
 //缓存LI元素
 var $ lis = $（＃text> li）; 
 var $ aLis = $（＃vivid_buttons> li）; 
 
函数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（）{
 //调用fadeAndMove（）传递nextIndex作为新的currentIndex 
 fadeAndMove（nextIndex）; 
}）; 
}，4000）; 
}）; 
 
 //得到它开始索引0 
 fadeAndMove（0）; 
}）; 
  

I'm new to jQuery and stack overflow, so I'll try to be specific, but please bear with me. I'm trying to create a text slider with associated links from scratch, using modulus to iterate through the list and repeat.

Here's the code I'm working with:

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

In simple language, I want to fade in a sentence from the first list, and highlight the corresponding link on the bottom list. I then want it to fade out and move to the next item.

I thought I could use modulus (%) and a for loop to iterate through and create an infinite loop, but when I put this in it's like it executes everything all at once, not iterating through (fading in and out) for each item.

I know this is confusing, but I'd appreciate any help I could get.

解决方案

Get rid of the for loop, and just have the setTimeout call the fadeAndMove() function, passing the current index.

Example: 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 );
});

这篇关于使用javascript模块在for循环中遍历文本滑块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！