序列圖像淡出文件夾

Question

我的目標的：

我想淡出每個圖像從文件夾中。圖像每隔一段時間就會改變一次。由於安全原因，這甚至可能嗎？顯示圖像的網站不是公開的。這僅僅是一個錫伯族數字標牌

我得到了什麼至今：

這裏是JSFiddle

HTML：

<div id="cf4a" class="shadow"> 
    <img src="images/4.jpg"> 
    <img src="images/5.jpg"> 
    <img src="images/4.jpg"> 
    <img src="images/5.jpg"> 
</div> 

CSS：

@-webkit-keyframes cf4FadeInOut { 
0% { 
    opacity:1; 
} 
17% { 
    opacity:1; 
} 
25% { 
    opacity:0; 
} 
92% { 
    opacity:0; 
} 
100% { 
    opacity:1; 
} 
} 

@-moz-keyframes cf4FadeInOut { 
0% { 
    opacity:1; 
} 
17% { 
    opacity:1; 
} 
25% { 
    opacity:0; 
} 
92% { 
    opacity:0; 
} 
100% { 
    opacity:1; 
} 
} 

@-o-keyframes cf4FadeInOut { 
0% { 
    opacity:1; 
} 
17% { 
    opacity:1; 
} 
25% { 
    opacity:0; 
} 
92% { 
    opacity:0; 
} 
100% { 
    opacity:1; 
} 
} 

@keyframes cf4FadeInOut { 
0% { 
    opacity:1; 
} 
17% { 
    opacity:1; 
} 
25% { 
    opacity:0; 
} 
92% { 
    opacity:0; 
} 
100% { 
    opacity:1; 
} 
} 

#cf4a img { 
    position:absolute; 
    left:0; 
} 

#cf4a img { 
    -webkit-animation-name: cf4FadeInOut; 
    -webkit-animation-timing-function: ease-in-out; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-duration: 8s; 

    -moz-animation-name: cf4FadeInOut; 
    -moz-animation-timing-function: ease-in-out; 
    -moz-animation-iteration-count: infinite; 
    -moz-animation-duration: 8s; 

    -o-animation-name: cf4FadeInOut; 
    -o-animation-timing-function: ease-in-out; 
    -o-animation-iteration-count: infinite; 
    -o-animation-duration: 8s; 

    animation-name: cf4FadeInOut; 
    animation-timing-function: ease-in-out; 
    animation-iteration-count: infinite; 
    animation-duration: 8s; 
} 
#cf4a img:nth-of-type(1) { 
    -webkit-animation-delay: 6s; 
    -moz-animation-delay: 6s; 
    -o-animation-delay: 6s; 
    animation-delay: 6s; 
} 
#cf4a img:nth-of-type(2) { 
    -webkit-animation-delay: 4s; 
    -moz-animation-delay: 4s; 
    -o-animation-delay: 4s; 
    animation-delay: 4s; 
} 
#cf4a img:nth-of-type(3) { 
    -webkit-animation-delay: 2s; 
    -moz-animation-delay: 2s; 
    -o-animation-delay: 2s; 
    animation-delay: 2s; 
} 
#cf4a img:nth-of-type(4) { 
    -webkit-animation-delay: 0; 
    -moz-animation-delay: 0; 
    -o-animation-delay: 0; 
    animation-delay: 0; 
} 

Answer 1

一個非常簡單的解決方案可能是每隔一段時間刷新頁面以拉取新圖像。

JS：

setTimeout(function(){ 
    window.location.reload(1); 
}, 5000);