1

以下を使用してプリロードされたjpg画像をスワップ/アニメーション化して画像をプリロードしようとしています:

<img id="slideshow" src="../../Content/images/IM0-Frame1.jpg" alt="" width="200"
        height="200">
    <script type="text/javascript">
                $(document).ready(function () {
                    preload_images();
                  });
                function preload_images() {
                    var images = new Array();
                    for (var i = 1; i <= 126; i++) {
                        var str;
                        if (i < 10) {
                            str = i;
                        } else {
                            str = i;
                        }
                          images.src="../Content/images/IM0-Frame" + str + ".jpg";
                    }
                }
    </script>

あなたの提案をいただければ幸いです。

4

2 に答える 2

1

実際に画像をプリロードするのではなく、配列に URL を入力するだけで、画像をプリロードして Image オブジェクトを作成し、その src プロパティを画像 URL に設定します。

var img = new Image();
img.src = "../Content/images/IM0-Frame" + str + ".jpg";
于 2012-08-28T18:00:26.403 に答える
0

これは単純なスライドショーで、画像をプリロードし、setInterval関数を使用してスライドさせ、マウスオーバー/マウスオーバーで画像のループを停止/再開します。

var images = [];
var i = 0;
var interval = null;

function preload_images() {
    for (var i = 0; i < 126; i++) {
        images[i] = new Image();
        images[i].src = "../Content/images/IM0-Frame" + i + ".jpg";
    }
}

preload_images();

function cycle_images() {
    i = (i < 2) ? i + 1 : 0;
    document.getElementById('slideshow').src = images[i].src;
}

$(document).ready(function() {
    interval = setInterval(cycle_images, 2000);
    $('#slideshow').hover(function() {
        clearInterval(interval);
    }, function() {
        interval = setInterval(cycle_images, 2000);
    });
});

フィドルの例

于 2012-08-28T19:50:18.787 に答える