1

我有一个网页，其中包含大量隐藏的 li 元素列表，我想无限循环并显示在一个包含 5 个 li 元素的小型可见列表中。我目前正在使用一种递归方法，该方法在每次更新后使用下一个 li 元素调用自身，该方法可以很好地一次淡入/淡出每个可见的 li 。但是，一旦我尝试将可见 li 中的 html 更改为隐藏 li 中的 html，我将循环遍历所有地狱。所有 5 个可见的 li 都设置为前 5 个隐藏的 li，并同时淡入/淡出。然后有一个长时间的停顿，页面冻结了一会儿，最终所有 5 个可见的 li 将再次淡入/淡出，仍然设置为前 5 个隐藏的 li。就像我突然尝试更改 html 时，整个循环同时发生，我可以'

$(function () {
    fade($("#all-donors").first(), 1);           
});

function fade(elem, curItem) {
    var curElement = $("#donor" + curItem);
    //curElement.html(elem.html());  //This line breaks it
    curElement.fadeOut(1000).fadeIn(1000, function () {
        curItem++;
        if (curItem > 5) {
            curItem = 1;
        }

        // If we're not on the last <li>
        if (elem.next().length > 0) {
            // Call fade on the next <li>
            fade(elem.next(), curItem);
        }
        else {
            // Else go back to the start
            fade(elem.siblings(':first'), curItem);
        }
    });
}
4

2 回答 2

2

LI's仅从 1 个元素循环<UL>，并从 2 个元素循环<LI>标签<UL>，使用第一个 UL 作为可见 UL，第二个 UL 作为looper UL

第一种方法

JSFIDDLE 最终结果在这里

淡入，只有在淡出完成后。并用于class隐藏除第一个 li 之外的所有 li 元素，无需将curItem参数发送给函数，这只会搞砸，只需将.nextor:first元素发送给函数即可。而且不用用.length > 0，.length就够用了。

$(document).ready(function() {
    myFunc($(".show"));
});

function myFunc(oEle)
{
    oEle.fadeOut('slow', function(){
        if (oEle.next().length)
        {
            oEle.next().fadeIn('slow', function(){
                myFunc(oEle.next());
            });
        }
        else
        {
            oEle.siblings(":first").fadeIn('slow', function(){
                myFunc(oEle.siblings(":first"));
            });
        }
    });
}

HTML：

<ul class="listitem">
    <li class="show">Test 1</li>
    <li class="hidden">Test 2</li>
    <li class="hidden">Test 3</li>
    <li class="hidden">Test 4</li>
</ul>

第二种方法，回答你的问题！

JSFIDDLE 最终结果在这里

查询：

var curIndex = 0, 
    nextIndex = 0;

$(document).ready(function() {
    myFunc($(".show").children().eq(curIndex), $(".hidden").children().eq(nextIndex));
});

function myFunc(curLI, nextLI)
{
    curLI.fadeOut('slow', function(){
        $(this).html(nextLI.html()).fadeIn('slow', function() {
            curIndex = curLI.next().length ? ++curIndex : 0;
            nextIndex = nextLI.next().length ? ++nextIndex : 0;
            myFunc($(".show").children("li").eq(curIndex), $(".hidden").children("li").eq(nextIndex));
        });
    });
}

HTML结构：

<ul class="listitem show">
    <li>Blah 1</li>
    <li>Blah 2</li>
    <li>Blah 3</li>
    <li>Blah 4</li>
    <li>Blah 5</li>
</ul>
<ul class="listitem hidden">
    <li>Test 1</li>
    <li>Test 2</li>
    <li>Test 3</li>
    <li>Test 4</li>
    <li>Test 5</li>
    <li>Test 6</li>
    <li>Test 7</li>
    <li>Test 8</li>
    <li>Test 9</li>
    <li>Test 10</li>
    <li>Test 11</li>
    <li>Test 12</li>
    <li>Test 13</li>
    <li>Test 14</li>
</ul>

CSS：

.listitem {
    list-style-type: none;
    list-style: none;
}
ul.hidden li {
    display: none;
}

抱歉，我想我没有完全理解您的确切要求。好吧，希望这对某人有所帮助，如果不是你的话。

于 2013-08-09T14:57:15.627 回答
0

在这里，我想这就是你要找的。它可以根据您的需要进行更改，但这是基本的工作。

JSFiddle （更新）：http: //jsfiddle.net/Ut86V/4/

HTML：

<ul class="list1">

  <li>blahxx</li>
  <li>blahxxx</li>
  <li>blahxxxx</li>
  <li>blahxxxxx</li>
  <li>blahxxxxxx</li>
</ul>


<ul class="list2">
  <li>blah1</li>
  <li>blah2</li>
  <li>blah3</li>
  <li>blah4</li>
  <li>blah5</li>
  <li>blah6</li>
  <li>blah7</li>
  <li>blah8</li>
  <li>blah9</li>
  <li>blah0</li>
  <li>blah11</li>
  <li>blah12</li>
  <li>blah13</li>
  <li>blah14</li>
  <li>blah15</li>
  <li>....</li>
</ul>

Javascript：

function popList( speed ) {

    speed = speed || 2000;
    var $list1 = $('.list1 li');
    var $list2 = $('.list2 li');
    var item = 0;
    var source = 0;

    for( i=0; i<5; i++ ) {

        $list1.eq( i ).html( $list2.eq( i ).html() );
        source = i+1;

    }

    var replaceContent = function() {           

        $list1
            .eq( item )
            .delay( speed/2 )
            .animate(
                { opacity: 0 }, 
                speed/4, 
                function() {

                    var content = $list2.eq( source ).html();

                    $(this)
                        .html( content )
                        .animate(
                            { opacity: 1 }, 
                            speed/4 
                        );

                    item = ( item >= 4 ) ? 0 : item+1;
                    source = ( source >= $list2.length-1 ) ? 0 : source+1;

                    replaceContent();

                }
            );           

    };

    replaceContent();


};

$(function() {
    popList(5000);
});
于 2013-08-09T15:14:04.307 回答