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

.ContentFlow div を 5 秒ごとに回転させようとしています。ただし、機能していません。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 を同じ Web ページ上に配置できる最新バージョンのContentFlow v1.0.2を使用することをお勧めします。それぞれに固有の JavaScript ハンドラーがあります。

次に、必要なすべてのタイミング要件を処理するContentFlow スライドショー プラグインを使用できます。

Slideshow プラグインの良いところは、各 ContentFlow を異なるタイミング速度に設定できることです。

于 2012-06-12T08:20:50.457 に答える