0

このようなシンプルな画像ギャラリーを作ろうとしています。http://dimsemenov.com/plugins/royal-slider/#image-gallery サムネイル画像をクリックすると、画像要素が作成され、読み込み中の画像が少し表示され、作成された要素が表示領域にスライドします。画像要素が削除されます。

<div id="imageGallery" style="overflow:visible;display:block;">
<div class="preview">
    <div id="content" style="width:640px;height:420px;">
         <img id="main-Image" alt="" src="../../baContent/image1.jpg" style="display:inline; top:0;left:0;" />
    </div>
</div>
<div id="thumbnails">
    <a class="thumbnail" href="../../baContent/image1.jpg"><img alt="Image 1" src="../../baContent/image1-thumb.jpg"></a>
    <a class="thumbnail" href="../../baContent/image2.jpg"><img alt="Image 2" src="../../baContent/image2-thumb.jpg"></a>   
</div>


$(document).ready(function () {
    $(".thumbnail").click(function () {
        $("#mainImage").animate({ "left": "-640px" }, "fast");
        $('#preview').css('background-image', "url('../../baContent/spinner.gif')");
        var img = $("<img style='left:640px;display:none;' />").attr('src', this.href).load(function () {
            $('#mainImage').attr('src', img.attr('src'));
            $('#preview').css('background-image', 'none');
            $(this).parent().prevAll().remove();
            $("#mainImage").animate({ "left": "-640px" }, "fast");
        });

    });

});

私はいくつかのコードを書きましたが、成功しませんでした。アイデアやチュートリアルはありますか?

4

1 に答える 1

0

試す ：

$(document).ready(function () {
    $(".thumbnail").click(function () {
        $('#main-Image').hide();
        $('#preview').css('background-image', "url('../../baContent/spinner.gif')");

        var imgSrc = $(this).attr('href');
        var img = $("<img style='left:640px;display:none;' />").attr('src', imgSrc).load(function () {
            $('#main-Image').attr('src', imgSrc);
            $('#preview').css('background-image', 'none');
            $('#main-Image').fadeIn();
        });

        return false;
    });
});​

必要なすべてのアニメーションを追加できます。

適切なスライダーについては、http://bxslider.com/を参照してください。

于 2012-07-19T09:59:33.090 に答える