슬라이드 쇼용 jQuery 이미지 인덱스

Question

나는 작은 슬라이드 쇼 스크립트를 만들어 이미지 목록을 순환합니다. 문제는 next() 및 prev() 함수에서 현재 색인을 선택하는 것입니다.

슬라이드 쇼를 볼 때 너무 많은 next()가 수행되어 한 슬라이드에 이미지가 표시되지 않습니다. 색인이 너무 높습니다. 클릭 이전은(), 그것은 몇 번의 클릭에 대한 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을 선택하여 슬라이드 쇼를 계속하십시오.