0

画像のリストを循環する小さなスライドショー スクリプトを作成しました。問題は、 next() および prev() 関数の実行中に現在のインデックスを選択することです。

スライドショーを表示すると、実行される next() が多すぎるため、1 つのスライドに画像が表示されません。指数が高すぎる。prev() をクリックすると、数回クリックすると 0 インデックス (画像がありません) に座っているように見え、その後 7 に戻ります。

ここにjQueryコードがあります

jQuery('.slideshow').css({'position': 'relative', 'width': 240, 'height': 263}).find('img').css('display', 'none');
jQuery('.slideshow').find('img').eq(startingSlide).css('display', 'block');

jQuery('.slideshow span').click(function()
{
   if (jQuery(this).hasClass('span2'))
   {
      var currentSlide = jQuery('.slideshow img:visible').prevAll().length;

      jQuery('.slideshow').find('img').eq(currentSlide)
      .css('display', 'none').next('img').css('display', 'block').css({top: -300, left: 0}).animate({top: 0, left: 0}, 2000, 'easeOutBounce');
   }
   else
   {
      var currentSlide = jQuery('.slideshow img:visible').prevAll().length;

      jQuery('.slideshow').find('img').eq(currentSlide)
      .css('display', 'none').prev('img').css('display', 'block').css({top: 300, left: 0}).animate({top: 0, left: 0}, 2000, 'easeOutBounce');
   }
});

インデックスを修正する方法について何か考えはありますか?

4

1 に答える 1

0

私はあなたのコードをかなり更新しました。さらに改良が必要ですが、状況を混乱させたくありませんでした。これが何をするかについて質問がある場合は、質問してください。コードブロックの後に少し説明があります。

var $slideshow = jQuery('.slideshow'),
    $images    = $slideshow.find('img');

$slideshow.css({'position': 'relative', 'width': 240, 'height': 263});
$images.css('display','none').eq(startingSlide).css('display', 'block');

$slideshow.find('span').click(function()
{
   if (jQuery(this).hasClass('span2'))
   {
      var $currentSlide = $images.filter(':visible'),
          $nextSlide    = $currentSlide.next('img');

      if(!$nextSlide.length) $nextSlide = $images.filter(':first'));

      $currentSlide.css('display','none');
      $nextSlide.css({ display: 'block', top: -300, left: 0}).animate({top: 0, left: 0}, 2000, 'easeOutBounce');
   }
   else
   {
      var $currentSlide = $images.filter(':visible'),
          $prevSlide    = $currentSlide.prev('img');

      if(!$prevSlide.length) $prevSlide = $images.filter(':last');

      $currentSlide.css('display','none');
      $prevSlide.css({ display: 'block', top: 300, left: 0}).animate({top: 0, left: 0}, 2000, 'easeOutBounce');
   }
});

ここで重要なことは、.next('img')orを取得し、結果のプロパティを.prev('img')テストすることです。length0 に等しい場合は、最後または最初に当たるので、必ず反対を選択しimgてスライドショーを続行してください。

于 2009-12-03T03:16:44.953 に答える