0

jQuery Cycleプラグインを使用して、最初の画像にカーソルを合わせたときに画像のスライドショーを開始しています。これは正常に機能します。その後、ホバーしたときにスライドショーを停止し、手動のスライドショー（[次へ] / [前へ]ボタン）を開始する必要があります。これは現在機能していますが、スライドショーは初期化されるたびに最初から開始されます。ロードされている現在の画像から開始したいと思います。

DOMから画像のインデックスを取得して（display：blockを持つ唯一の画像であるため）、オプション「startingSlide」を使用して画像を再開しようとしていましたが、インデックスは-1として返され続けます。

jQuery('#home-menu li').hover(function()
{
   setImages(jQuery(this).attr('title'), jQuery(this).find('.subtitle').text());

   jQuery('#main .blog #projects .gallery .slideshow').cycle(
   {
      fx: 'scrollHorz',
      easing: 'easeOutBounce',
      speed: 2000,
      delay: 0
   });
}, function()
{
   // Before loading the images for the clickable slideshow, find the current image in the DOM array to use as the starting position
   slideshowStart = jQuery('.gallery .slideshow img:visible').index(this);
   console.log('Index: ' + slideshowStart);
   setImages(jQuery(this).attr('title'), jQuery(this).find('.subtitle').text());

   jQuery('#main .blog #projects .gallery .slideshow').cycle('stop').cycle(
   {
      fx: 'scrollHorz',
      easing: 'easeOutBounce',
      startingSlide: slideshowStart,
      speed: 2000,
      timeout: 0,
      next: "#main .blog #projects .gallery span.span2",
      prev: "#main .blog #projects .gallery span.span1"
   });
});

setImages（）は、liがホバーされている内容に基づいて、画像をDOMにロードするだけです。特別なことは何もありません。

ホバーしたりホバーしたりしたときに画像を再開したい。私はそれを機能させようとしていた間、ホバーするための履歴書の部分を省略しました-あなたが疑問に思っている場合に備えて。

4

2 に答える 2

0

問題はホバー アウト コールバックにあります。

slideshowStart = jQuery('.gallery .slideshow img:visible').index(this);

1) まず、jQuery ステートメントは、セレクターに一致するすべての要素を選択します。サイクル プラグインは、コンテナー内の 1 つの画像のみが表示されるようにするため、このステートメントは最大 1 つのimg要素を選択します。

2) 次に、index関数はステップ 1 で選択された要素 (単一の要素) を検索して、サブジェクト(インデックス関数に提供された引数) にimg一致する要素を見つけることができるかどうかを確認します。あなたの場合、件名はで、ホバー コールバックのコンテキストでは です。thisjQuery(#home-menu li)

li要素が要素と一致することはないimgため、この への呼び出しindex()は常に -1 を返します (「オブジェクトが見つかりません」の場合)。

これを修正するには、ステートメントを次のように変更します。

slideshowStart = $('.slideshow img').index($('img:visible'));

1) まず、要素内のすべてのimg要素を選択します<div class='slideshow'>。

2) 次に、imgそのリスト内の最初の可視要素のインデックスを返します。

于 2009-11-09T02:45:09.820 に答える
0

一時停止して再生するだけの場合は、次のオプションを使用します。

jQuery('#home-menu li').hover(function() {
  $("#yourSlideshow").cycle("再開");
}、 関数 {
  $("#yourSlideshow").cycle("一時停止");
});
于 2010-01-19T23:30:51.463 に答える