1

我有这个项目清单

<div id="lessonThree">
<a class="next" href="#">Next</a>

 <ul class="sponsors">
    <li>Chicago Community Trust</li>
    <li>Chicago Instructional Technology Foundation</li>
    <li>City of Chicago</li>
    <li>Corporation for Public Broadcasting</li>
    <li>U.S. Department of Energy</li>
    <li>Ford Foundation</li>
    <li>Google</li>
    <li>Intel</li>
    <li>Knight Foundation</li>
    <li>MacArthur Foundation</li>
    <li>National Endowment for the Arts</li>
    <li>NESTA</li>
    <li>The Nominet Trust</li>
    <li>National Science Foundation</li>
    <li>Ontario Trillium Foundation</li>
    <li>Social Science Research Council</li>
    <li>Alfred P. Sloan Foundation</li>
    <li>Telefonica</li>
    <li>ZeroDivide</li>
  </ul>    
</div>

我在这里想要实现的是我想设置一次应该显示多少项目的限制。

var MAX_ITEM = someNumbers // this will be define in the javascript file

因此，如果说他们当时要显示的最大项目是：3我真正想要的是让他们fadeIn一个接一个地使用 jQuery，当它达到 MAX_ITEM 时，我希望1500使用 setTimeOut 或类似的东西延迟几毫秒显示一下，然后三个项目将是fadeOut并开始接下来的三个项目，依此类推作为一个无限循环。

该next按钮用于加速到下一个项目，就好像他们想让它移动得更快一样。

我曾经使用过这个插件CarofredSel，但它确实影响了我们 web 应用程序中的很多页面加载，并且它对我无法真正控制的样式有很多限制。

谁能建议我一种方法或任何例子，以便我可以做到这一点？

这是我开始的代码

$('ul > li').each(function(i, element) {
    $(element).delay(i * 2000).fadeIn();
});

但是上面的代码只会遍历每个列表项，然后会在最后停止。

更新：

我做了更多的研究“关于 Stackoverflow” 有很多很好的例子，这是最接近我想要的，但我不能完全完成我想要的。

var counter = 0;
var limit = 3;

function fadeInSequence(li){
    var next = $(li).next('li')!=null?function(){fadeInSequence($(li).next('li'));}:function(){};
    $(li).fadeIn(2000,next);
    counter++;
    if(counter == limit){

        counter = 0;
    }

}
fadeInSequence($('.sponsors>li:first'));

http://jsfiddle.net/zdqCz/84/

上面的代码将fadeIn遍历列表中的所有项目，但不是无限的，我现在想要的与上面的相同，我只想显示 3 个项目fadeOut并显示下一个 3。

4

1 回答 1

2

所以你的更新是一个好的开始......我对其进行了调整以包含 3 个项目（jquery 选择器）而不是 1 个，并在 fadeIn 的回调中添加了一个 fadeOut 来实现你正在寻找的循环。回调到达列表末尾后，我们重新开始。见下文

function fadeInSequence($three) {
    //default to the first three list items
    if ($three == null) $three = $('.sponsors>li:lt(3)');

    //fade in the 3 found
    $three.fadeIn(2000, function () {
        //fade out the 3 after fadein and start
        $(this).fadeOut(2000);
    }).promise().done(function () {
        if ($three.last().nextAll(':lt(3)').length) {
            //Same function, next 3 items
            fadeInSequence($three.last().nextAll(':lt(3)'));
        } else {
            //Same function, from the beginning if none are left
            fadeInSequence();
        }
    });
}

$(function () {
    //start the infinite looping
    fadeInSequence();
});

http://jsfiddle.net/Q3DTC/4/

对于 3 个项目中的每一个的淡入：http: //jsfiddle.net/Q3DTC/6/

于 2013-07-14T22:32:33.290 回答