html - 使用 CSS 实现跑马灯效果

Question

由于 html marquee 标签已被弃用(但非常易于使用)，我需要使用 CSS3 动画来对图像产生 marquee 效果。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/