Question

我试图创建一个幻灯片，我想在图像中添加一个淡入淡出的文本。我希望文本随关注的图像淡入淡出。文本和图像出现但是问题是它们没有显示为slidshow。我现在正在研究它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>

Answer 1

好的，所以我不能用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是num的。 fadeIn（）和.fadeOut（）函数+ 1.所以对我来说，有四个fadeIn（）;和fadeOut（）;函数，所以4 + 1 = 5，和5 * 2800 = 11200。

只需将你自己的css和id和/或类替换为jquery并修改html，你就得到了一个！

如何制作文字和图像fadein和fadeout作为slidshow？

1 个答案: