次のimg要素への移動方法

Question

私はpage.iで多くの画像を持っています。画像をクリックすると、他の大きな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のコードは次のとおりです。

あなたが Jsfiddle

で見ることができます

$(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'); 
    }); 

}); 

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}); 
    }); 

});