使用前进和后退按钮遍历图像

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 数组中，并让您的点击处理程序更新该索引，然后使用数组中该索引处的 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]);
});