使用前進和後退按鈕對圖像進行迭代

Question

我有五個圖像需要作爲圖庫進行迭代。所以當用戶點擊一個「前進按鈕」時，數組中的下一個圖像顯示在div中。並且還點擊「後退按鈕」。對不起，如果這是愚蠢的編碼，但我在這裏很新。

$(document).ready(function() { 
    // when thumbnail is clicked 

    $("img#thumb").click(function() { 
     var imgpath = $(this).attr("src"); 
     $("img#cover").attr("src", imgpath); 

    }); 

    $(function() { 
     $("img#thumb").bind('click', function() { 
      var img = $(this).clone(); //this clones the img, so you do not need to re-load that using src path 
      $("img#cover").hide().html(img).fadeIn(500); //remove .hide() segment if you just are hiding by css rules 

     }); 
    }); 

    //when the nextimage link is clicked 
    var imgs = ["images/exteriors/abandonned/img0.jpg", 
       "images/exteriors/abandonned/img1.jpg", 
       "images/exteriors/abandonned/img2.jpg"]; 

    $("img#nextimage").click(function() { 

     $.each(imgs, function() { 

      $("img#cover").attr("src", imgs); // I want to iterate each image and display when it is clicked 
     }); 

    }); 
}); 

HTML：

<div id="thumbs"> <!--gallery thumbs--> 
<img id="thumb1" src="images/exteriors/abandonned/img0.jpg" width="100px" height="80px" class="" /><br> 
<img id="thumb2" src="images/exteriors/abandonned/img1.jpg" width="100px" height="80px" class="" /><br> 
<img id="thumb3" src="images/exteriors/abandonned/img2.jpg" width="100px" height="80px" class="" /><br> 
<img id="thumb" src="images/exteriors/abandonned/img3.jpg" width="100px" height="80px" class="" /><br> 
<img id="thumb" src="images/exteriors/abandonned/img3.jpg" width="100px" height="80px" class="" /><br> 
</div> 

Answer 1

你並不需要在一個或下一個按鈕，每一次點擊迭代的圖像;相反，使用變量將索引存儲到imgs數組中，並讓您的click處理程序更新該索引，然後使用該數組中索引處的URL更新標記的src屬性。也許這樣的事情，可能是：

var imgindex = 0; 

$('img#nextimage').click(function() { 
    imgindex++; // increment the index into array 'imgs' 
    if (imgindex > (imgs.length - 1)) { imgindex = 0; }; // if we just walked off the far end of the array, reset the index to zero (loop around to the 1st image) 
    $('img#cover').attr('src', imgs[imgindex]); // update the img src 
}); 

$('img#previmage').click(function() { 
    imgindex--; // decrement the array index 
    if (imgindex < 0) { imgindex = (images.length - 1); }; // if we just walked off the near end of the array, loop around to the last image 
    $('img#cover').attr('src', imgs[imgindex]); 
});