javascript - 旋转盖流效果

HTML格式：

- for (x in dict)
  div.test
    div.ContentFlow
      div.loadIndicator
        div.indicator
      div.flow
        - for (var i in dict[x])
          img(class='item', src='/images/' + dict[x][i] + '.jpg')

我的CSS：

.test {
  display:block;
}
.ContentFlow {
  margin-top: 10%;
}

客户端JS：

var count = 0
var items;
var amount = 0;
$(window).load(function(){
    items = $("#test .ContentFlow");
    amount = items.length;

    items.hide();
    items.eq(count).show();
}
$(window).load(setInterval(function(){

    // tried this as well
    //var items = $("#test .ContentFlow");
    //var amount = items.length;

    items.eq(count).hide();
    count >= amount-1 ? count = 0 : count++;
    items.eq(count).show();

}, 1000));

ConentFlow css/js：
http://www.jacksasylum.eu/ContentFlow/docu.php
我试图每5秒旋转一次.ContentFlow div。但是，它不起作用。设置display:none后，ContentFlow类在加载时及其后不会显示任何内容。如果我没有为css中的ContentFlow div设置display:none，那么所有div都将在加载时显示
我应该使用哪些属性才能工作。如果问题不清楚，请告诉我。

最佳答案

移动

items = $(".ContentFlow");
var amount = items.length;

在函数内部，以便在窗口加载后执行。
重构：

var count = 0;

$(window).load(function(){

    // Hide at first
    $("#test .ContentFlow").hide();

    // Start repeating toggle
    setInterval(function(){

        var items = $("#test .ContentFlow");
        var amount = items.length;

        items.eq(count).hide();
        (count >= amount-1) ? count = 0 : count++;
        items.eq(count).show();

    }, 1000);
};

与使用$("#test .ContentFlow").hide();进行初始隐藏不同，您可能只需要设置一个样式.ContentFlow{display:none;}以避免在页面仍在加载时闪烁。