如何为我的JavaScript幻灯片添加淡出效果？

Question

我目前正在简单的网页上工作，并使用JavaScript添加了三个图像的幻灯片显示。 我喜欢幻灯片在其他网站上淡入淡出的方式，而不仅仅是突然改变。 请告诉我如何仅在使用CSS，标准HTML和Java脚本时将此影响添加到当前代码中。 这是我的HTML代码

    <!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;

}

Answer 1

除非您的要求要求您避免使用JavaScript框架，否则我会研究RevealJS。

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

Reveal具有您正在查看的特定操作（淡入和淡出），并且有很多文档记录。 如果您正在寻找这些东西，它们还拥有一个托管平台，以及供您下载和使用的开源版本。 我亲自将其用于我所有自定义开发的HTML驱动的幻灯片。

Answer 2

给图像一个基线不透明度，并确定该元素向不透明度的所有过渡都将在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秒钟内淡出。

如何为我的JavaScript幻灯片添加淡出效果？

问题描述

2 个解决方案

解决方案1
0 2015-01-13 02:09:16

解决方案2
0 2015-01-13 02:24:17

如何为我的JavaScript幻灯片添加淡出效果？

问题描述

2 个解决方案

解决方案1 0 2015-01-13 02:09:16

解决方案2 0 2015-01-13 02:24:17

解决方案1
0 2015-01-13 02:09:16

解决方案2
0 2015-01-13 02:24:17