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();，以避免在页面仍在加载时闪烁，而不是使用.ContentFlow{display:none;}进行初始隐藏。

Answer 2

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

然后，您可以使用ContentFlow Slideshow Plugin，然后处理您需要的所有时序要求。

Slideshow插件的优点在于每个ContentFlow都可以设置为不同的计时速度。

旋转罩流效果

2 个答案: