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

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

1 个答案: