Question

我制作了一个小型幻灯片脚本来循环浏览图像列表。它的问题是在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');
   }
});

有关如何修复索引的想法吗？

Answer 1

我更新了你的代码，它仍然需要更多的改进，但我不想混淆这种情况。如果您对此有任何疑问，请询问。代码块后面有一点解释。

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以继续幻灯片放映。

幻灯片显示的jQuery图像索引

1 个答案: