旋转盖流效果

Question

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。 但是，它不起作用。 在为ContentFlow类设置display：none后，在加载时及之后均不显示任何内容。 如果我没有在CSS中为ContentFlow div设置display：none，则所有div都会在加载时显示

我应该使用哪些属性来工作。 如果问题不清楚，请告诉我。

Answer 1

移动

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();进行初始隐藏$("#test .ContentFlow").hide(); ，您可能只想设置样式.ContentFlow{display:none;}即可避免在页面仍在加载时闪烁。

Answer 2

我建议您使用最新版本的ContentFlow v1.0.2 ，该版本允许将多个ContentFlows放在同一网页上，每个网页都有一个唯一的JavaScript处理程序。

然后，您可以使用ContentFlow幻灯片插件 ，然后处理所需的所有时序要求。

Slideshow插件的好处是可以将每个ContentFlow设置为不同的计时速度。