画像ギャラリー次と前のボタン

Question

チェックこのhttp://jsfiddle.net/5VEeH/

[スペース]小さな画像および表示のため、[A]は、大きな写真です。 [a] hrefからのコピーリンクが必要です。そのリンクは '#display' divにイメージを表示する必要があります。次と前のボタンが動作し、最後の画像が最初の画像から再び開始した後。

Answer 1

私はあなたが探しているものを理解していますが、多分これはそれですか？

$(document).ready(function() { 
    var E = $("a", "#img-list"), N = 0, T = E.length-1; 

    $("#display").html('<img src="'+$(E[N]).attr('href')+'" />'); 
    $('#next, #prev').on('click', function() { 
     var A = this.id == 'next',X=A?T:0,Y=A?0:T,Z=A?N+1:N-1;N=N==X?Y:Z; 
     $("#display").html('<img src="'+$(E[N]).attr('href')+'" />'); 
    }); 
    E.on('click', function(e) { 
     var S = $(this).attr('href'); 
     $("#display").html('<img src="'+S+'" />'); 
     e.preventDefault(); 
    }); 
}); 

ここにはFIDDLEが表示されます。

Answer 2

これは初心者のための私のバージョンです。私も初心者のmは:)

http://jsfiddle.net/5VEeH/6/

JS

は

$(function() { 

    $('#listimg img').each(function(i){ 
    var img = $(this); 
    img.attr('num',i).attr('id','img'+i); 
    img.click(function(){ 
    $('.active').removeClass('active'); 
    img.addClass('active'); 
    $('.display').hide().attr('src',this.src).fadeIn(); 
    }); 
    }); 

    $('#img0').addClass('active'); 
    $('.display').hide().attr('src',$('#img0').attr('src')).fadeIn(); 

     $('#next').click(function(){ 
     var imgnext = $('.active'); 
     var idnext = Number(imgnext.attr('num'))+1; 
     var last= $('#listimg img').length; 
     if(idnext==last){} 
       else{ 
     var srcn = $('#img'+idnext).attr('src'); 
    $('.active').removeClass('active'); 
     $('#img'+idnext).addClass('active'); 
      $('.display').hide().attr('src',srcn).fadeIn();} 

    }); 
      $('#prev').click(function(){ 
     var imgnext = $('.active'); 
     var idnext = Number(imgnext.attr('num'))-1; 
       if(idnext=="-1"){} 
       else{ 
         var srcn = $('#img'+idnext).attr('src'); 
     $('.active').removeClass('active'); 
     $('#img'+idnext).addClass('active'); 
     $('.display').hide().attr('src',srcn).fadeIn();} 


    }); 

}); 

HTML

<div id="display"> <img class='display' src="" /></div> 
    <button id="prev">prev</button> 
    <button id="next">next</button> 
<div id='listimg'> 
    <img src="http://3.bp.blogspot.com/-tGWtjEA6S-0/Tr3KpPLtLSI/AAAAAAAADaY/VBCrqP1_Gm8/-c/" /> 
    <img src="http://img543.imageshack.us/img543/47/img1td.png" /> 
    <img src="http://3.bp.blogspot.com/-tGWtjEA6S-0/Tr3KpPLtLSI/AAAAAAAADaY/VBCrqP1_Gm8/-c/" /> 
    <img src="http://img543.imageshack.us/img543/47/img1td.png" /> 
    <img src="http://3.bp.blogspot.com/-tGWtjEA6S-0/Tr3KpPLtLSI/AAAAAAAADaY/VBCrqP1_Gm8/-c/" /> 
    <img src="http://img543.imageshack.us/img543/47/img1td.png" /> 


</div>