如何添加淡出影響到我的JavaScript幻燈片？

我目前正在使用簡單的網頁，並使用JavaScript添加了三張圖片的幻燈片。我喜歡一個其他網站的幻燈片顯示方式如何淡入淡出，而不是突然改變。請告訴我如何將此影響添加到當前的代碼中，同時僅使用CSS，標準HTML和Java腳本。這是我的HTML代碼如何添加淡出影響到我的JavaScript幻燈片？

<!DOCTYPE html> 
<html> 
     <head> 
      <title>Car Of Your Dreams Australia</title> 
      <link rel="shortcut icon" href="?\favicon.ico"> 
      <link rel="stylesheet" type="text/css" href="stylesheet.css"> 
      <h1> Car Of Your Dreams Australia </h1> 


<script type="text/javascript"> 

var slideimages = new Array() 
slideimages[0] = new Image() 
slideimages[0].src = "r8.jpg" 
slideimages[1] = new Image() 
slideimages[1].src = "California.jpg" 
slideimages[2] = new Image() 
slideimages[2].src = "SLSAMG.jpg" 

</script> 
<body> 
     <img src="r8.jpg" id= "slide" width=1336 height=768 /> 

     <script type = "text/javascript"> 
     var step=0 

     function slideit(){ 
     if (!document.images) 
     return 
     document.getElementById('slide').src = slideimages[step].src 
     if (step<2) 
     step++ 
     else 
     step=0 
     setTimeout("slideit()",5000) 
     } 

     slideit() 

     </script> 
</body> 

     </head> 
     </html>

和我的CSS

body {background-color:#000000;} 
h1 {color:#FF0040;} 
p1 {color:#C1CDCD;} 

h1 { 
    font-family: Calibri; 
    font-size: 26px; 
    font-style: normal; 
    font-variant: normal; 
    font-weight: bold; 
    line-height: 11px; 
} 

p1 { 
    font-family: Calibri; 
    font-size: 14px; 
    font-style: normal; 
    font-variant: normal; 
    font-weight: 400; 
    line-height: 14px; 
} 

h1.italic {font-style:italic;} 

.boxed { 
    margin-right:750px; 
    position:absolute; 
    left:60px; 
    top:100px; 
    z-index:+1; 
    border: 5px outset #E0EEEE;

}

來源

2015-01-13 ThazL

除非你requireements要求您避免JavaScript框架我會去了解一下RevealJS。

http://lab.hakim.se/reveal-js/#/

顯示有您（在淡入淡出）看記錄的具體行動等等。他們也有一個託管平臺，如果這是你想要的東西，以及爲你下載和玩的開源版本。我個人將其用於我所有定製的HTML驅動幻燈片套件。

來源

2015-01-13 02:09:16 Matt617

給圖像一個基線不透明度，並確定所有向這個元素不透明度的過渡都將在1秒內發生。

img{ 
    opacity:1; 
    transition:opacity 1s; 
}

創建具有0

img.fade{ 
    opacity:0; 
}

的不透明度一類新的這個類添加到元件時slideit（）;產卵：

function slideit(){ 
    document.getElementById('slide').classList.add('fade');

添加超時函數1秒後發生直接後，這將改變元件的SRC和也將刪除褪色類，從而再次焙燒該過渡。

setTimeout(function(){ 
    document.getElementById('slide').src = slideimages[step].src; 
    document.getElementById('slide').classList.remove('fade'); 
}, 1000);

現在函數執行時，現有的圖像將淡出超過1秒，然後將圖像的SRC將發生變化，然後將淡出超過1秒。

來源

2015-01-13 02:24:17 Ohgodwhy

CSS中的前兩個代碼示例是？ – ThazL

它仍然無法正常工作，因爲發生的所有事情都是淡入第一個圖像，然後停留在那裏。您能否爲我發佈完整代碼的副本？ – ThazL

如何添加淡出影響到我的JavaScript幻燈片？

回答

相關問題