0

クリックするとフルスクリーンで表示される画像で構成される垂直カルーセルを作成しました。しかし、問題は、フルスクリーン画像がプリロードされているか、サムネイル画像のように機能するかを確認する方法がわからないことです(プリロードされます)。

css バックグラウンドを使用してフルスクリーン画像をプリロードする方法と、カルーセルのサムネイルをクリックしたときに画像がフェードインまたはトランジションする方法がわかりません。

私のコードがアップロードされている次のリンクを見てください。 http://www.lluvia.me/slideshow/carousel.html

都合がよければ、ソースを確認してスクリプトを確認してください。助けていただければ幸いです。ありがとう！

4

1 に答える 1

0

この投稿を見つけて、それが役立つかもしれないと考えました、jQueryで画像をプリロードする

後で参照できるように、コードの一部を本文に投稿してみてください。:)

早くて簡単：

function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        $('<img/>')[0].src = this;
        // Alternatively you could use:
        // (new Image()).src = this;
    });
}

// Usage:

preload([
    'img/imageName.jpg',
    'img/anotherOne.jpg',
    'img/blahblahblah.jpg'
]);

または、jQuery プラグインが必要な場合:

$.fn.preload = function() {
this.each(function(){
    $('<img/>')[0].src = this;
});
}

// Usage:

$(['img1.jpg','img2.jpg','img3.jpg']).preload();

または、純粋に CSS に固執したい場合は、このページをチェックしてください: http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/背景画像を画面外に配置してから来ることができます。必要に応じて画面に表示されます。

#preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; }
#preload-02 { background: url(http://domain.tld/image-02.png) no-repeat -9999px -9999px; }
#preload-03 { background: url(http://domain.tld/image-03.png) no-repeat -9999px -9999px; }
于 2013-01-01T15:27:03.857 に答える