0

プレビュー要素に画像を動的に追加しようとしています。サムネイルをクリックすると、画像が読み込まれてスライドします。

<div id="imageGallery">
    <div id="loading"></div>
    <a class="thumbnail"><img alt="Image 1" src="../../baContent/image1.jpg" /></a>
    <a class="thumbnail"><img alt="Image 2" src="../../baContent/image2.jpg" /></a>
    <div id="preview">
        <img id="mainImage" alt="Main Image" src="../../baContent/image1.jpg" /> 
    </div>
</div>

 $(document).ready(function () {
        $("#loading").show();
        var oldImage = $("#preview img:first");
        var newImage = $("#mainImage").insertAfter(oldImage).css('position', 'absolute').css('left', 800);
        newImage.load(function () {
            $("#loading").hide();
            oldImage.css({ left: 0 }).animate({ left: -800 });
            newImage.css({ left: 800 }).animate({ left: 0 });
            oldImage.remove();
        });
});

私の考えは、最初の画像の後に画像を動的に挿入し、古い画像を削除することです。私は多くの関数append、insertToを試みます。しかし、それは機能していません。アドバイスに感謝します:)

4

1 に答える 1

0

あなたは複雑に考えすぎていると思います...

$(document).ready(function(){
    $(".thumbnail").click(function(){
        $("#loading").show();
        // Create new image instance
        $("<img/>", {
            // Get source of image to load
            src: $(this).find("img").attr("src")
        }).css({
            position: "absolute",
            left: 800
        }).load(function(){
            $("#loading").hide();
            // Append new image to preview div
            $("#preview").append($(this));
            // Get current image and animate it
            $("#preview").find("img:first").css({
                position: "absolute"
            }).animate({
                left: -800
            }, function(){
                // Remove the image when animation complete
                $(this).remove();
            });
            // Animate new image
            $(this).animate({
                left: 0
            }, function(){
                // Do something interesting...
            });
        });
    });
});


ここでテストしてください: http://jsfiddle.net/dpzdL/

于 2012-07-23T14:34:20.727 に答える