使用CSS有跑馬燈效果

Question

我需要使用CSS3動畫與圖像選取框效果的HTML字幕標記被棄用（但非常容易使用）。該HTML代碼如下：

<div class="marquee"> 

    <a href="images/1.jpg"><img src="images/1.jpg"></a> 
    <a href="images/2.jpg"><img src="images/2.jpg"></a> 
    <a href="images/3.jpg"><img src="images/3.jpg"></a> 
    <a href="images/4.jpg"><img src="images/4.jpg"></a> 
    <a href="images/5.jpg"><img src="images/5.jpg"></a> 
    <a href="images/1.jpg"><img src="images/5.jpg"></a> 
    <a href="images/2.jpg"><img src="images/4.jpg"></a> 
    <a href="images/3.jpg"><img src="images/3.jpg"></a> 
    <a href="images/4.jpg"><img src="images/2.jpg"></a> 
    <a href="images/5.jpg"><img src="images/1.jpg"></a> 

    </div> 

我使用的CSS3動畫效果如下：

.marquee{ 
display:block; 
position:relative; 
width:1800px; 
height:160px; 
animation:scroll 25s ease-in-out infinite; 
} 

@keyframes scroll{ 
0% {left:0;} 
100% {left:-260px;} 
} 

但是這種解決方案的問題是，如果我有多個圖像的數目，則動畫效果提前完成，因此後者的圖像永遠不會顯示。還有，增加唱動畫的持續時間，圖像滑動非常緩慢，從而摧毀了選框效果本身。任何幫助？

Answer 1

試試這個插件，這將有助於你

http://wmh.github.io/jquery-scrollbox/

http://technicalpixel.com/continous-horizontal-jquery-image-marquee/