添加fadein和fadeout到CSS和java幻燈片

我發現和幻燈片放映只使用java和css。我需要這個，因爲我也在我的css腳本中使用背景混合模式，並且這不適用於img src。添加fadein和fadeout到CSS和java幻燈片

這裏是代碼：

也在這裏：

function run(interval, frames) { 
    var int = 1; 

    function func() { 
     document.body.id = "b"+int; 
     int++; 
     if(int === frames) { int = 1; } 
    } 

    var swap = window.setInterval(func, interval); 
} 

run(6000, 10); //milliseconds, frames

這是CSS代碼：

#b1 { background: hsl(10, 50%, 50%); } 
#b2 { background: hsl(30, 50%, 50%); } 
#b3 { background: hsl(60, 50%, 50%); } 
#b4 { background: hsl(90, 50%, 50%); } 
#b5 { background: hsl(120, 50%, 50%); } 
#b6 { background: hsl(150, 50%, 50%); } 
#b7 { background: hsl(180, 50%, 50%); } 
#b8 { background: hsl(210, 50%, 50%); } 
#b9 { background: hsl(240, 50%, 50%); } 
#b10 { background: hsl(270, 50%, 50%); }

有沒有辦法來添加淡入和淡出效果？另外我注意到你可以改變以毫秒爲單位的時間。第一毫秒沒有圖像加載後毫秒將結束的最後時間比第一個圖像將加載。有沒有辦法拿出第一圖像瞬間

親切的問候，賈斯汀

來源

2016-07-22 Justin

http://javascriptisnotjava.io –

這是一個非常糟糕的實現，你到那裏BTW –

如果添加

body { 
    transition-duration: 1s; 
}

然後顏色會褪色相互轉化。如果你使用的圖像，然後他們將淡入淡出

來源

2016-07-22 00:46:06

我剛剛添加正文{ transition-duration：1s; }到Java代碼。那麼什麼都沒發生 – Justin

@Justin好吧，好像你不明白，這是** JavaScript **和** java =/= JavaScript **。您需要將該部分添加到** CSS **。在嘗試使用它之前請先學習這些東西。 –

奧克剛剛把它工作THNX！你是否也知道一個乳清如何從一張開始的圖像開始，而不僅僅是一個6秒的空白屏幕？ – Justin

添加fadein和fadeout到CSS和java幻燈片

回答

相關問題