2011-01-16 21 views
0

jQuery Cycleでスライドショーを作成しましたが、タイマーに問題があります。カップルのサイクルの後、彼らはうんざりしています。どのようにして1つの関数と1つのタイマーで2つのサイクルアニメーションをマージできますか?jQueryサイクル - 1サイクルで2つのアニメーション

ありがとうございました。

は、XHTML:

<div id="slideshow"> 
    <ul> 
    <li> 
     <div class="image"><img src="test.jpg" /></div> 
     <div class="description">Some text goes here</div> 
    </li> 
    <li> 
     <div class="image"><img src="test.jpg" /></div> 
     <div class="description">Some text goes here</div> 
    </li> 
    <li> 
     <div class="image"><img src="test.jpg" /></div> 
     <div class="description">Some text goes here</div> 
    </li> 
    </ul> 
</div> 

のjQuery:

var img = $(this).find('#slideshow div.image'); 
var desc = $(this).find('#slideshow div.description'); 
$('#slideshow ul').cycle({ 
    fx: 'scrollHorz', 
    speed: 'fast', 
    timeout: 5000, 
    next: '.next', 
    pause: 1, 
    slideExpr: img 
}); 
$('#slideshow').cycle({ 
    fx: 'scrollVert', 
    speed: 'fast', 
    timeout: 5000, 
    next: '.next', 
    pause: 1, 
    slideExpr: desc 
}); 
+0

あなたは解決策を見つけましたか?同じものを探しています。 –

答えて

0

私は、あなたがすべきだと思う:

  1. 問題を扱う時間のために、独自のカスタム関数を作成します(というがシンプルなJS関数がトリックを行います)。
  2. サイクルの「タイムアウト」プロパティを0に設定して、自動アバースしないようにします。
  3. このフォームでカスタム関数で使用可能なコマンド「PREV」と「次」を使用してください:

$('#slideshow').cycle('next'); 

私はあなたのコード内でのアプローチを参照してください、お奨めは、単に素晴らしいアイデアにあなたをありがとう私にthoを与えた。

+0

あなたはそれを少し説明していただけますか... uloとしてのスライドショーはうまくいっていますが、どうやってページャーを使うことができますか? –

関連する問題