javascript - 如何使文本和图像以幻灯片方式淡入淡出？

我正在尝试创建幻灯片，我想向图像中添加一个淡入和淡出的文本。我希望文本与相关图像一起淡入和淡出。文本和图像出现了，但问题是它们没有显示为slideshow。我现在已经工作了3天了，我不知道为什么它不起作用。如果您可以提供帮助，那我就在我的工作中，给出了以下代码：

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <style>body, html {
        text-align: center;
        font-size: 90px;
        font-family: Poiret One;
        height: 100%;
        color: black;
        overflow: hidden;
        color: black;
    }

    .letter {
        position: relative;
        top: -webkit-calc(50% - 60px);
        top: calc(50% - 60px);
        text-shadow: 0px 0px 3px black;
    }
    .letter:nth-child(1) {
        -webkit-animation: fade 4s infinite 200ms;
        animation: fade 4s infinite 200ms;
    }
    .letter:nth-child(2) {
        -webkit-animation: fade 4s infinite 400ms;
        animation: fade 4s infinite 400ms;
    }
    .letter:nth-child(3) {
        -webkit-animation: fade 4s infinite 600ms;
        animation: fade 4s infinite 600ms;
    }
    .letter:nth-child(4) {
        -webkit-animation: fade 4s infinite 800ms;
        animation: fade 4s infinite 800ms;
    }
    .letter:nth-child(5) {
        -webkit-animation: fade 4s infinite 1000ms;
        animation: fade 4s infinite 1000ms;
    }
    .letter:nth-child(6) {
        -webkit-animation: fade 4s infinite 1200ms;
        animation: fade 4s infinite 1200ms;
    }
    .letter:nth-child(7) {
        -webkit-animation: fade 4s infinite 1400ms;
        animation: fade 4s infinite 1400ms;
    }

    @-webkit-keyframes fade {
        50% {
            opacity: 0.02;
        }
    }

    @keyframes fade {
        50% {
            opacity: 0.02;
        }
    }</style>
<body>

<div class="w3-container">
<span class='letter'>T</span>
<span class='letter'>E</span>
<span class='letter'>S</span>

<span class='letter'>T <img class="w3-animate-fading" src="https://img-aws.ehowcdn.com/750x428p/cpi.studiod.com/www_ehow_com/i.ehow.com/images/a06/3a/be/study-compass-math-placement-test-800x800.jpg" style="width:50%;"></span>
</div>

<div class="w3-container">
<span class='letter'>T</span>
<span class='letter'>E</span>
<span class='letter'>S</span>
<span class='letter'>S</span>
<span class='letter'>2 <img class="w3-animate-fading" src="https://insurancemarket.ng/images/thumbnails/280/95/detailed/3/26e178f.png" style="width:50%;"></span>



</div>


</body>
</html>

最佳答案

好的，因为我对CSS动画的了解很糟糕，所以我不能完全使用CSS做到这一点，所以我决定使用jQuery！

$("div").hide();
blank();
function blank() {
$(".1").fadeIn(400).delay(2000).fadeOut(400);
$(".2").delay(2800).fadeIn(400).delay(2000).fadeOut(400);
$(".3").delay(5600).fadeIn(400).delay(2000).fadeOut(400);
$(".4").delay(8400).fadeIn(400).delay(2000).fadeOut(400);
setTimeout(blank, 11200);
}

.div {
  height: 100px;
  width: 200px;
  margin-left:250px;
  margin-top:150px;
  border: 3px solid black;
}

#button {
  height: 50px;
  width: 50px;
  border: 3px solid black;
  margin-top:50px;
  margin-left: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div 1">Lorem Ipsum dolor sit amat.</div>
<div class="div 2">Quod Est Super Omne Nomem.</div>
<div class="div 3">Exaltabunt Sancti in Gloria.</div>
<div class="div 4">Ubi Caritas et amor, Christus.</div>

在jsfiddle中：https://jsfiddle.net/uod0hp6L/32/

因此，对我而言，.fadeOut();和.fadeIn();设置为400或.4秒。为了使外观整洁，可以添加。 .delay();只是在淡出之前将其保留在屏幕上。因此，对于第一个$("#first").fadeIn(time1).delay(time2).fadeOut(time3);，其中的“时间”以毫秒为单位。
然后第二个：$("#second").delay(time1+time2+time3).fadeIn(time1).delay(time2).fadeOut(time3);
然后，对于第三个延迟，开始的延迟加倍（time1 + time2 + time3），对于第四个延迟三倍（time1 + time2 + time3），依此类推。对于最后一个setTimeout(function, x*(time1+time2+time3));，其中x是.fadeIn（）和.fadeOut（）函数+1。因此，对我来说，有四个fadeIn（）;和fadeOut（）;功能，因此4 + 1 = 5，和5 * 2800 = 11200。

只需将您自己的css和id和/或类替换为jquery并修改html，您就可以拥有一个！