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

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);
});