2

这已经困扰我好几天了。. . 所以我有这个布局

<div class='body1'>
    <ul id='list1'>
        <li class='heading'>Name</li>
        <li>Name 1</li>
        <li>Name 2</li>
        <li>Name 3</li>
    </ul>
</div>
<div class='body1'>
    <ul id='list2'>
        <li class='heading'>Name</li>
        <li>Name 1</li>
        <li>Name 2</li>
        <li>Name 3</li>
    </ul>
</div>
<div class='body1'>
    <ul id='list3'>
        <li class='heading'>Name</li>
        <li>Name 1</li>
        <li>Name 2</li>
        <li>Name 3</li>
    </ul>
</div>

这是我的功能

function changePage(){
    var limit = 5; //number of list to show
    var pages = $(".body1");
    var pageul = $(".body1 ul");
    if ($.cookie('pg') == null || $.cookie('pg') >= pages.length){
        $.cookie('pg', 0); // just the cookie to retain current div on display when refresh
    }
    var c = $.cookie('pg');
    $(pages).hide(); // hide all divs
    $(pageul).find('li').hide(); // hide all list inside divs
    $(pages[c]).fadeIn(2000); //fade in the page with index cookie
    $(pages[c]).find('li:lt('+limit+')').fadeIn(2000); //fadein the lists
    c++; //increment
    $.cookie('pg', c); //then store as cookie
    window.setTimeout(changePage, 10000); //run every 10 sec
}

我想做的是以 10 秒的间隔循环显示所有 div，但是如果一个 div 的列表多于限制，则通过每 10 秒显示 5（限制）来拆分列表，当到达最后一个时，继续循环 div ..

我在正确的轨道上吗？或者我需要不同的方法？

我对 jquery 很陌生，所以请多多包涵

4

2 回答 2

1

快速调试显示这c是String从 cookie 中检索到的时间。您不能将其用作 jQuery 对象的索引，您需要先将其解析为整数。所以这一行：

var c = $.cookie('pg');

更改为：

var c = parseInt($.cookie('pg'), 10); // parseInt(string, radix)

（基数是您正在使用的数字系统的基数，在这种情况下是十进制，也就是基数 10）。

>更新了 jsFiddle（我将限制更改为 8 以使其更清晰）。

（我不知道 jQuery 是否支持从带有字符串的 jQuery 对象中检索第 n 个元素的方法，但是通过文档似乎并非如此）。

于 2013-05-11T22:22:35.740 回答
0

现在工作，愚蠢的我，我只需要调用 window.setTimeout(changePage, 10000); 在 clearInterval 之后大声笑..

<div class='body1'>
    <ul id='list1'>
        <li class='heading'>Name</li>
        <li>Name 1</li>
        <li>Name 2</li>
        <li>Name 3</li>
    </ul>
</div>
<div class='body1'>
    <ul id='list2'>
        <li class='heading'>Name</li>
        <li>Name 1</li>
        <li>Name 2</li>
        <li>Name 3</li>
        <li>Name 4</li>
        <li>Name 5</li>
        <li>Name 6</li>
        <li>Name 7</li>        
    </ul>
</div>
<div class='body1'>
    <ul id='list3'>
        <li class='heading'>Name</li>
        <li>Name 1</li>
        <li>Name 2</li>
        <li>Name 3</li>
    </ul>
</div>

function changePage(){
    var limit = 6; //number of list to show
    var pages = $(".body1");
    if ($.cookie('pg') == null || $.cookie('pg') >= pages.length){$.cookie('pg', 0);} // just the cookie to retain current div on display when refresh
    var c = $.cookie('pg');
    $(pages).hide(); // hide all divs
    $(pages).find('li').hide(); // hide all list inside divs
    $(pages[c]).fadeIn(2000); //fade in the page with index cookie
    if($(pages[c]).find("ul li:not(.heading)").length > limit){
        $(pages).find('li:lt('+(limit+1)+')').fadeIn(2000);
        var grpli = Math.ceil($(pages[c]).find("ul li:not(.heading)").length/limit);
        var timesRun = 0;
        var interval = setInterval(function(){
            timesRun += 1; //increment
            gt = (limit*(timesRun+1))-5;
            if(timesRun === grpli-1){clearInterval(interval); window.setTimeout(changePage, 10000);}else{window.clearTimeout(timer);} // fixed by calling setTime out again
            $(pages).find('li:not(.heading)').hide(); //hide all lists again
            $(pages).find('li:gt('+gt+'):lt('+gt+')').fadeIn(2000); //show 5 lists between gt and lt
        }, 10000); 
    }else{
        $(pages[c]).find('li:lt('+limit+')').fadeIn(2000);
    }
    c++; //increment
    $.cookie('pg', c); //then store as cookie
    var timer = window.setTimeout(changePage, 10000); //run every 10 sec
}
changePage();
于 2013-05-12T23:02:59.637 回答