我试图创建一个幻灯片，我想在图像中添加一个淡入淡出的文本。我希望文本淡入淡出与关注的图像。文本和图像出现但问题是他们并没有像现在这样滑动。我现在正在研究它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或0.4秒。为了获得干净的外观，您可以添加它。 .delay();在淡出之前将它保留在屏幕上。所以对于第一个它的$("#first").fadeIn(time1).delay(time2).fadeOut(time3);，其中“时间”以毫秒为单位。然后对于第二个：$("#second").delay(time1+time2+time3).fadeIn(time1).delay(time2).fadeOut(time3);然后开始的延迟加倍（time1 + time2 + time3）为第三个，trippled（time1 + time2 + time3）为第四个，等等。对于最后的setTimeout(function, x*(time1+time2+time3));，其中x是num .fadeIn（）和.fadeOut（）函数+ 1.所以对我来说，有四个fadeIn（）;和fadeOut（）;函数，所以4 + 1 = 5，和5 * 2800 = 11200。
只需将您自己的CSS和ID和/或类替换为jquery并修改html，您就得到了一个！