0

以下は、背景として機能している画像要素です。位置は絶対的であり、z-index も低いため、残りのコンテンツの背後に留まります。

<img src="day-sky.jpg" id="background" />

以下の秒は、1 分間の秒数を表しています。これは単なるテスト目的ですが、秒が 30 秒未満の場合は 1 つの背景画像を、30 秒を超える場合は別の画像を使用したいと考えています。可能であれば、トランジションは次の画像への素晴らしいフェードになります。

これを行う方法を探していましたが、良い方法が思いつきませんでした。何かご意見は？

function changeBackground() {

if (secs > 30) {
    //have one background
}
else {
    //have a different background
  }
}
4

2 に答える 2

1

setInterval()要件に従って定義したタイムスタンプごとに、関数を使用して背景を変更することができます。

setInterval(changebackground, timeout); runs the code/function once after the timeout.

 $(function() {
    setInterval(function() {
        var bg = ["#000","#FF0", "#909"]
        var rep= Math.floor(Math.random() *3);
                $("body").css("background",bg[rep])
    }, 3000)
  })
于 2012-11-09T17:13:33.653 に答える
0

これが実際の例です: http://jsfiddle.net/PKqGk/

var imgs = [
        "http://placehold.it/1920x1080/&text=1",
        "http://placehold.it/1920x1080/&text=2",
        "http://placehold.it/1920x1080/&text=3",
        "http://placehold.it/1920x1080/&text=4",
        "http://placehold.it/1920x1080/&text=5",    
        "http://placehold.it/1920x1080/&text=6"   
    ],
    ind = 0,
    dur = 10 * 1000; // ten seconds
(function imgSlide(){

    var img = ind % 2 ? $('#imageOne') : $('#imageTwo'),
        hid = ind % 2 ? $('#imageTwo') : $('#imageOne');

    console.log(img, hid);

    img.fadeOut("slow", function(){
        hid.fadeIn("slow").css('margin-left', -hid.width()/2);
        if (++ind == imgs.length) ind = 0;
        img.attr('src', imgs[ind]);
        setTimeout(imgSlide, dur);
    });
})();​
于 2012-11-09T18:14:54.060 に答える