Wielokrotny przechodzenie między obrazami w CSS - bez skryptu (java)

Question

Czy można przeskakiwać 5 obrazów w CSS, bez używania skryptu java? Znalazłem podobne pytanie: css3 image crossfade (no javascript), jednak ma tylko fragment kodu CSS; które próbowałem, ale nie mogłem go uruchomić. Jestem nowy na CSS, więc nie mógł połączyć CSS mowa w powyższej stronie mojego następujący kod HTML:

<div id= "crossfade"> 
    <img class = "cone" src = "1.png" alt = "png"> 
    <img class = "ctwo" src = "2.png" alt = "png"> 
    <img class = "cthree" src = "3.png" alt = "png"> 
    <img class = "cfour" src = "4.png" alt = "png"> 
    <img class = "cfive" src = "5.png" alt = "png"> 
    </div> 

Answer 1

Można to łatwo zrobić za pomocą CSS3, jeśli wiesz, ile masz zdjęć.

jsFiddle: http://jsfiddle.net/hajmd/

#crossfade > img { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    color: transparent; 
    opacity: 0; 
    z-index: 0; 
    -webkit-backface-visibility: hidden; 
    -webkit-animation: imageAnimation 30s linear infinite 0s; 
    -moz-animation: imageAnimation 30s linear infinite 0s; 
    -o-animation: imageAnimation 30s linear infinite 0s; 
    -ms-animation: imageAnimation 30s linear infinite 0s; 
    animation: imageAnimation 30s linear infinite 0s; 
} 

The "30s" At "-webkit animację: ImageAnimation 30. liniowe nieskończone 0s;" mówi, że animacji dla każdego obrazu będzie trwał 30 sekund nieskończenie wiele razy.

#crossfade > img:nth-child(2) { 
    background-image: url(../images/2.jpg); 
    -webkit-animation-delay: 6s; 
    -moz-animation-delay: 6s; 
    -o-animation-delay: 6s; 
    -ms-animation-delay: 6s; 
    animation-delay: 6s; 
} 
#crossfade > img:nth-child(3) { 
    background-image: url(../images/3.jpg); 
    -webkit-animation-delay: 12s; 
    -moz-animation-delay: 12s; 
    -o-animation-delay: 12s; 
    -ms-animation-delay: 12s; 
    animation-delay: 12s; 
} 
#crossfade > img:nth-child(4) { 
    background-image: url(../images/4.jpg); 
    -webkit-animation-delay: 18s; 
    -moz-animation-delay: 18s; 
    -o-animation-delay: 18s; 
    -ms-animation-delay: 18s; 
    animation-delay: 18s; 
} 
#crossfade > img:nth-child(5) { 
    background-image: url(../images/5.jpg); 
    -webkit-animation-delay: 24s; 
    -moz-animation-delay: 24s; 
    -o-animation-delay: 24s; 
    -ms-animation-delay: 24s; 
    animation-delay: 24s; 
} 

@-webkit-keyframes imageAnimation { 
    0% { opacity: 0; 
    -webkit-animation-timing-function: ease-in; } 
    8% { opacity: 1; 
     -webkit-animation-timing-function: ease-out; } 
    17% { opacity: 1 } 
    25% { opacity: 0 } 
    100% { opacity: 0 } 
} 

@-moz-keyframes imageAnimation { 
    0% { opacity: 0; 
    -moz-animation-timing-function: ease-in; } 
    8% { opacity: 1; 
     -moz-animation-timing-function: ease-out; } 
    17% { opacity: 1 } 
    25% { opacity: 0 } 
    100% { opacity: 0 } 
} 

@-o-keyframes imageAnimation { 
    0% { opacity: 0; 
    -o-animation-timing-function: ease-in; } 
    8% { opacity: 1; 
     -o-animation-timing-function: ease-out; } 
    17% { opacity: 1 } 
    25% { opacity: 0 } 
    100% { opacity: 0 } 
} 

@-ms-keyframes imageAnimation { 
    0% { opacity: 0; 
    -ms-animation-timing-function: ease-in; } 
    8% { opacity: 1; 
     -ms-animation-timing-function: ease-out; } 
    17% { opacity: 1 } 
    25% { opacity: 0 } 
    100% { opacity: 0 } 
} 

@keyframes imageAnimation { 
    0% { opacity: 0; 
    animation-timing-function: ease-in; } 
    8% { opacity: 1; 
     animation-timing-function: ease-out; } 
    17% { opacity: 1 } 
    25% { opacity: 0 } 
    100% { opacity: 0 } 
} 

Answer 2

Przykład ty odwołuje powinny pracować dla Ciebie na przykład ty odwołanie. Należy jednak pamiętać, że CSS3 nie jest obsługiwany we wszystkich przeglądarkach (takich jak IE8 i IE7) i dlatego nie będzie działać w tych przeglądarkach.