Wie kann ich CSS Animation mit Bildern machen, die von selbst spielen. (Ohne Benutzerinteraktionen)

Question

Ich versuche, aber ich weiß nur, wie man Image Slider mit Javascript macht ... Kann jemand vorschlagen oder einen Code geben, um mir zu helfen anzufangen?

Ich habe versucht, Java-Skript zu verwenden, aber es hat nicht erfüllt, was ich brauche.

Answer 1

Sie erreichen dies einfach durch Verwendung von CSS-Animationen und Ändern der Deckkraft der verschiedenen Bilder. Hier ist ein codepen, der zeigt, wie es geht.

HTML

<div class="fade-container"> 
    <img src="http://fillmurray.com/200/300" alt="Fading image" class="fade-img"/> 
    <img src="https://source.unsplash.com/random" alt="Fading image" class="fade-img"/> 
    <img src="https://placeimg.com/640/480/any" alt="Fading image" class="fade-img"/> 
    <img src="http://pipsum.com/435x310.jpg" alt="Fading image" class="fade-img"/> 
</div> 

CSS

.fade-container { 
    position: relative; 
} 

.fade-img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 300px; 
} 

@keyframes fade { 
    0% { 
    opacity: 0; } 
    4% { 
    opacity: 1; } 
    21% { 
    opacity: 1; } 
    25% { 
    opacity: 0; 
    -webkit-animation-delay: 9s; 
    animation-delay: 9s; } 
    100% { 
    opacity: 0; 
    -webkit-animation-delay: 9s; 
    animation-delay: 9s; } 
} 
.fade-img:nth-child(1) { 
    animation: fade 12s ease-in-out infinite; 
} 

.fade-img:nth-child(2) { 
    animation: fade 12s ease-in-out infinite; 
    animation-delay: 3s; 
    opacity: 0; 
} 

.fade-img:nth-child(3) { 
    animation: fade 12s ease-in-out infinite; 
    animation-delay: 6s; 
    opacity: 0; 
} 
.fade-img:nth-child(4) { 
    animation: fade 12s ease-in-out infinite; 
    animation-delay: 9s; 
    opacity: 0; 
}