0

わかりました。ユーザーが小さいサムネイル画像をクリックすると、表示される大きな画像が切り替わるようにします。

これは私のjqueryスクリプトですが、今のところ切り替えられません。サムネイルをクリックしても何も起こりません。

クリックするとサムネイルがスライドする2つの矢印画像があるのに、実際の親指をクリックすると何らかの理由でスライドしないため、奇妙です。一体何が起こっているのですか？

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>
4

1 に答える 1

0

同じページ内に同じ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);
});
于 2013-01-28T05:59:04.267 に答える