1

簡単なスライドショーを作成する方法について何か提案はありますか? 私の現在のものは途切れ途切れで、次の画像にフェードするだけです。

以下のコードを使用して、ホームページでスライドショーを自動再生し、フェード用の css を使用しています。フェードは非常にぎくしゃく/途切れ途切れに始まります。何が原因なのかわかりません。

<script  src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script>
    window.setInterval(slideClick, 5000);

    function slideClick() {
     $(".slide").click();
    }
    </script>

.slide {    
-webkit-transition: opacity 5s ease-in-out;
-moz-transition: opacity 5s ease-in-out;
-ms-transition: opacity 5s ease-in-out;
-o-transition: opacity 5s ease-in-out;
transition: opacity 5s ease-in-out;}
4

1 に答える 1

0


より迅速な画像操作のために、最初に画像を「プリロード」し てみてください。

// this variable is used in both code-snippets:
var images = $("img");

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

preload($("img"));


setTimeout...そして、javascriptと jQueryfadeIn()を 使用して画像を移行できますfadeOut()。

var currentIndex = images.length;
var delay = 4000;

(function transitionImages() {
    // fading the current image out:
    images.eq(currentIndex).fadeOut(delay);

    var previousIndex = currentIndex;
    while (currentIndex == previousIndex) {
        // setting a new unique index here:
        currentIndex = Math.floor(Math.random() * images.length);
    }

    // fading the next image in:
    images.eq(currentIndex).fadeIn(delay / 2);

    // recursive timeout here:
    setTimeout(transitionImages, delay);
})(); // end of immediately-invoked function expression ("IIFE")


ページの読み込み時に正確に開始するのに苦労していますが、私の画像が大きすぎるためだと思うので、小さい画像で試してみてください. と

の遅延時間を変えて実験してみてください。 また、が よりも望ましい理由を説明する良い答えがあります。 更新: また、セクションの最後で画像の事前読み込みを行う必要があるように思われますが、残念ながら、このアニメーションを大きな画像や多数の画像で試すと、jQuery の応答時間の問題がまだ発生しています... fadeInfadeOut

setTimeoutsetInterval



<head>

于 2014-01-12T23:27:39.107 に答える