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

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

转载作者：行者123 更新时间：2023-11-28 08:38:30

我目前正在制作简单的网页，并使用 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;