javascript로 다음 img 요소로 이동하는 방법

Question

페이지에 많은 이미지가 있습니다. 이미지를 클릭하면 다른 큰 img 태그 (올바른 작업)에 표시된 이미지를 볼 수 있습니다. 다음으로 다음 이미지를 표시 할 수 있습니다. 다음 버튼을 클릭하고 prev button.i를 클릭하면 이전 이미지를 표시합니다. 시도했지만, 제대로 작동하지 않습니다. 누구든지 나를 도울까요? 고마워요. 아래 CSS 코드에 내 코드를 참조하십시오입니다

<style> 
    .slideshow { 
     position: relative; 
    } 
    .slideshow img { 
    position: absolute; 

    } 
    .show{}/*complete in the future*/ 
</style> 

HTML 코드는 다음과 같습니다

<div class="slideshow"> 
    <img src="http://placekitten.com/200/300" width="100" height="100" alt="first image"> 
    <img src="http://placekitten.com/200/287" width="100" height="100" alt="second image"> 
    <img src="http://placekitten.com/200/285" width="100" height="100" alt="third image"> 
    <img src="http://placekitten.com/200/286" width="100" height="100" alt="fourth image"> 
    ... 
</div> 

<img id="largeImage" src="#" width="200" height="200" alt="Big Image"> 
<button type="button" Id="prev"> Previous</button> 
<button type="button" Id="next">Next</button> 

내 JS 코드는 다음과 같습니다

$(document).ready(function() { 

    /*this function set the large img tag src attribute*/ 
    $('.slideshow img').click(function() { 
    var src = $(this).attr("src"); 
    $('#largeImage').attr({src: src}); 
    }); 

    /*Next Button*/ 
    $('#next').click(function() { 
    var $curr = $('.slideshow img.show'); 
    var $next = ($curr.next().Lenght) ? $curr.next() : $('slideshow img').first(); 
    var src = $next.attr("src"); 
    $("#largeImage").attr({src: src}); 
    $curr.removeclass('show'); 
    $next.addclass('show'); 
    }); 

    /*Previouse Button*/ 
    $('#prev').click(function() { 
    var $curr = $('.slideshow img.show'); 
    var $next = ($curr.next().Lenght) ? $curr.next() : $('slideshow img').last(); 
    var src = $next.attr("src"); 
    $("#largeImage").attr({src: src}); 
    $curr.removeclass('show'); 
    $next.addclass('show'); 
    }); 

}); 

당신은 Jsfiddle

에서 볼 수

Answer 1

$(document).ready(function() { 

// here all the images will get hide and only 1st image will be displayed 
    $('.slideshow img').hide(); 
    $('.slideshow img:eq(0)').show(); 

    /*this function set the large img tag src attribute*/ 
    $('.slideshow img').click(function() { 
    var src = $(this).attr("src"); 
    $('#largeImage').attr({src: src}); 
    }); 

    /*Next Button*/ 
    $('#next').click(function() { 
    var displayImageNumber = 0; 
// Find the index of image which is visible 
    $.each($('.slideshow img'),function(key,value){ 
      if($(value).css('display') == 'block'){ 
      displayImageNumber = key; 
     } 
    }); 
    var displayImage = ''; 
    $('.slideshow img:eq('+displayImageNumber+')').hide(); 
    if($('.slideshow img').length == (displayImageNumber + 1)){ 
     displayImage = $('.slideshow img:eq(0)'); 
    }else{ 
     displayImage = $('.slideshow img:eq('+parseInt(displayImageNumber+1)+')'); 
    } 
    $(displayImage).show(); 
    var src = $(displayImage).attr("src"); 
    $('#largeImage').attr({src: src}); 
    }); 

    /*Previouse Button*/ 
    $('#prev').click(function() { 
    $.each($('.slideshow img'),function(key,value){ 
      if($(value).css('display') == 'block'){ 
      displayImageNumber = key; 
     } 
    }); 
    $('.slideshow img:eq('+displayImageNumber+')').hide(); 
    var displayImage = ''; 
    if(displayImageNumber == 0){ 
     displayImage = $('.slideshow img:eq('+parseInt($('.slideshow img').length-1)+')'); 
    }else{ 
     displayImage = $('.slideshow img:eq('+parseInt(displayImageNumber-1)+')'); 
    } 
    $(displayImage).show(); 
    var src = $(displayImage).attr("src"); 
    $('#largeImage').attr({src: src}); 
    }); 

});