2

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 都会在加载时显示

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

4

2 回答 2

2

移动

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;}以避免在页面仍在加载时闪烁。

于 2012-06-12T07:43:49.473 回答
2

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

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

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

于 2012-06-12T08:20:50.457 回答