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

我的想法是在第一张图片和旧图片删除后动态插入图片。我尝试了许多函数追加，插入到。但它不起作用。谢谢建议:)

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/