0

ギャラリーとして反復したい 5 つの画像があります。したがって、ユーザーが「進むボタン」をクリックすると、配列内の次の画像が 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>


4

1 に答える 1

0

次または前のボタンをクリックするたびに画像を繰り返す必要はありません。代わりに、変数を使用してインデックスを 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]);
});
于 2012-11-20T14:30:57.630 に答える