1

ページに複数のコンテンツ ティーザーがあり、各ティーザーには循環できる複数の画像があります。ランダムなティーザーを選択して次の画像に循環し、別のランダムなティーザーを選択して同じことを繰り返すような jquery サイクルを使用できるようにしたいと考えています。結果は、一度に 1 つの画像がページのどこかに移動する画像のページになります。

HTML -

<div class="video-slidehow">
<span class="video-thumb slideshow"><img src=""></span>
<span class="video-thumb slideshow"><img src=""></span>
<span class="video-thumb slideshow"><img src=""></span>
</div>

<div class="video-slidehow">
<span class="video-thumb slideshow"><img src=""></span>
<span class="video-thumb slideshow"><img src=""></span>
<span class="video-thumb slideshow"><img src=""></span>
<span class="video-thumb slideshow"><img src=""></span>
</div>

<div class="video-slidehow">
<span class="video-thumb slideshow"><img src=""></span>
<span class="video-thumb slideshow"><img src=""></span>
</div>

したがって、ランダムな「video-slideshow」ラッパーを選択し、そのラッパーの「video-thumb」子を次のラッパーに循環させます。次に、別の「video-slideshow」ラッパーを選択し、その「video-thumb」子を次のラッパーに循環させます。

簡単にするためにこの html をクリーンアップしたことに注意してください。各ビデオ スライドショー div には追加の親 div などがあります。

クラスを別のdivに移動し、それをjquery要素として使用することでこれを実行しようとしましたが、それは明らかに解決策ではないようです!

Jクエリ -

var elements = $('.video-slidehow');
$(elements[Math.floor(Math.random()*elements.length)]).addClass('someClass');


 $('.someClass').cycle({
    fx: 'scrollRight',      
    easing: 'easeInOutBack',
    speed:  700, 
    timeout: 7000, 
    after: doAfter
});


function doAfter() {
    $('.someClass').removeClass('someClass');   
       var elements = $('.video-slidehow'); 
           $(elements[Math.floor(Math.random()*elements.length)]).addClass('someClass');

        }

「ランダム」要件に関して。理想的には、同じラッパー div を 2 回続けて実行できないことです。

子犬ひげの答えの後、私は次のことを試みましたが無駄になりましたが、これは正しい方向に進み始めているように感じます! -

var elements = $('.video-slidehow');

$('.video-slidehow').cycle({
    fx: 'scrollRight',      
    easing: 'easeInOutBack',
    speed:  700, 
    timeout: 7000, 
    after: doAfter
});

function doAfter() {

    $('.video-slidehow').cycle('pause');    
   $(elements[Math.floor(Math.random()*elements.length)]).cycle('resume');

}
4

2 に答える 2

1

すべての要素をロードするときに、Cycleの一時停止オプションを使用する必要があります。

$（'。video-thumb'）。cycle（'pause'）;

アイテムを再開したい場合は、再開機能があります。

function doAfter() {


       $(elements[Math.floor(Math.random()*elements.length)]).cycle('resume');

    }
于 2012-11-06T17:38:08.467 に答える
0

正しい方向に私を送ってくれた Puppybeard に感謝します。

私が使用した解決策は次のとおりです。

まず、循環するすべてのインスタンスの配列を作成します。

var elements = $('.video-slideshow');

次に、一度に 1 つずつ循環させたいすべての要素のスライドショーを開始します。

  $('.video-slideshow').cycle({
    fx: 'scrollRight',      
    easing: 'easeInOutBack',
    speed:  700, 
    timeout: 700
});

3 番目に、すべての要素でスライドショーを一時停止し、ランダムに選択された 1 つの要素のスライドショーを再開する関数を実行します (以前に設定した配列を使用)。この機能は、設定された間隔で再実行して、それに応じてスライドショーを一時停止および再開する必要があります。これには setTimeout 関数を使用しました。このソリューションでは、サイクル間に一貫した一時停止が作成されないことに注意してください。私よりも優れたプログラマーであれば、そのレベルの精度を提供するより堅牢なソリューションを提供できると確信しています。

(function (){
    $('.video-slideshow').cycle('pause');
$(elements[Math.floor(Math.random()*elements.length)]).cycle('resume');
   setTimeout(arguments.callee, 700);
})();
于 2012-11-07T11:12:14.847 に答える