jQuery圖像滑塊庫

Question

我正在嘗試在預覽元素中動態添加圖像。因此，當我單擊縮略圖時，圖像將加載並滑動。

<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。 但這不起作用，謝謝:)

Answer 1

你想的太復雜了，我想...

$(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/