如何添加淡出影响到我的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幻灯片？

回答

相关问题