0

我制作了一个小幻灯片脚本来循环浏览图像列表。它的问题是在 next() 和 prev() 函数期间选择当前索引。

在查看幻灯片时，它会执行太多的 next()，导致一张幻灯片没有显示图像。指数太高了。单击 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')或.prev('img')并测试length结果的属性。如果它等于 0 而不是到达结尾或开头，因此请务必选择相反的内容img以继续幻灯片放映。

于 2009-12-03T03:16:44.953 回答