1

スライドショーを作成するための次の JavaScript があります。

window.addEventListener('load', main, false);

var number = 1;
var interval;

function main() {
    interval = setInterval(changeDia, 3000);
}

function changeDia() {
    var img = document.getElementById("dia");
    var currentDia = img.getAttribute("src");

    if(currentDia == "style/slideshow/6.jpg") {
        number = 1;
    } else {
        number = number + 1;
    }
    img.setAttribute("src", "style/slideshow/" + number + ".jpg");
}

このコードは正常に動作しますが、トランジションは非常に失礼です。現在の画像をフェードアウトさせ、次の画像をフェードインさせて、スムーズな移行を実現したいと考えています。最も簡単な方法は何ですか? Javascript と jQuery はどちらも私にとって良いものです。

前もって感謝します、

セドリック

4

1 に答える 1

1

プラグインなしで jQuery を使用して簡単に実行できます。

var i = 0,               //initial index
    duration = 1000,     //animation duration
    interval = 3000;     //interval

function switchImg() {
    $("<img>")                                               //create new <img>
        .attr("src", "style/slideshow/" + (i<6?++i:(i=1,i)) + ".jpg") //set attr.
        .css("opacity", 0)                                   //hide it
        .prependTo("#wrap")                                  //add it to DOM
        .animate({                                           //fade in
            opacity: 1
        }, {
            duration: duration
        })
        .next()                                              //select current img
        .animate({                                           //fade out
            opacity: 0
        }, {
            duration: duration
        })
        .promise()
        .done(function () {                                  //remove old img
            $(this).remove();                                // when done
            setTimeout(switchImg, interval);                 //repeat
        });
}
switchImg();                                                 //start up

http://jsfiddle.net/DerekL/vzhHZ/

position画像のプロパティを に設定することを忘れないでくださいabsolute。そうしないと機能しません。

于 2013-08-14T19:25:39.337 に答える