我有五个图像,我想作为画廊进行迭代。因此,当用户单击“前进按钮”时,数组中的下一个图像将显示在 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>