Индекс изображения jQuery для слайд-шоу - PullRequest
Новая
       10

Индекс изображения jQuery для слайд-шоу

0 голосов
/ 03 декабря 2009

Я сделал небольшой скрипт слайд-шоу, чтобы просмотреть список изображений. Проблема с этим заключается в выборе текущего индекса во время функций next () и prev ().

При просмотре слайд-шоу выполняется слишком много следующего (), в результате чего изображение для одного слайда не отображается. Индекс слишком высок. Когда щелкаешь 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');
   }
});

Есть идеи, как исправить индексы?

1 Ответ

0 голосов
/ 03 декабря 2009

Я немного обновил ваш код, и он все еще нуждается в доработке, но я не хотел запутывать ситуацию. Если у вас есть какие-либо вопросы о том, что это делает, пожалуйста, задавайте. Небольшое объяснение следует за блоком кода. 

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, чтобы продолжить слайд-шоу.

...