用户单击缩略图时切换图像

Question

好的，伙计们。我希望在用户点击较小的缩略图图像时切换显示的较大图像。

这是我的 jquery 脚本，但到目前为止它没有切换。单击缩略图时没有任何反应。

这很奇怪，因为我有两个箭头图像，单击时会滑动缩略图，但由于某种原因，单击实际拇指时却没有。到底是怎么回事？

jQuery：

$(document).ready(function () {

    // when image with ID thumb is clicked change src 
    $("img#thumb").click(function () {              
        var imgpath = $(this).attr("src");
        $("img#cover").attr("src", imgpath);
    });

    // slide more thumbnails 
    $("#arrowright").click(function () {
        $("#innerthumb").animate({ marginLeft: "-850px" });
    });

    $("#arrowleft").click(function () {
        $("#innerthumb").animate({ marginLeft: "0px" });
    });

    // image change on click
    $("img#thumb").click(function () {
        var newimg = $(this).attr("src");
        $("img#cover").attr("src", newimg);
    });

HTML

                    <div id="mainimage">
                        <div id="inner">
                            <img id="cover" src="images/environments/img0.jpg" width="980px" />
                            <img id="cover-old" src="" width="980px"/>
                        </div>
                    </div> <!--end of mainimage div-->

               <div id="arrowleft"><img src="images/arrowleft.png"></div>
                   <div id="innerthumb">
               <div id="thumb1" ><img id="thumb" src="images/environments/img0.jpg" width="160px" height="80px"/></div>
               <div id="thumb2" ><img id="thumb" src="images/environments/img1.jpg" width="160px" height="80px" /></div>
               <div id="thumb3" ><img id="thumb" src="images/environments/img2.jpg" width="160px" height="80px" /></div>
                   <div id="innerthumb"></div>
               <div id="arrowright"><img src="images/arrowright.png"></div>

Answer 1

您不应该在同一页面中使用具有相同 id 的 img。这会导致 jquery 选择器出现问题。

要解决您的问题，您必须将 img id 更改为 t1, t2, t3 并设置 class=thumb 然后在 jquery 部分执行类似的操作

$("img.thumb").click(function () {
    var id = $(this).attr("id");
    var newimg = $("#"+id).attr("src");
    $("img#cover").attr("src", newimg);
});