javascript - 我如何以循环方式为图像制作动画？`

Question

.move
{
     background-image: url("http://placehold.it/100x100"),url("http://www.billboard.com/files/charts/weekly/793-stack.svg");
     width: 100%;
     height: 300px;
     background-repeat: no-repeat;
     background-size: 100vw 100vh;
     animation-name: move;
     animation-delay: 2s; 
     animation-duration: 5s;
     animation-timing-function:linear;
     animation-iteration-count: infinite;
     background-position: 0 0, -100vw 0;
}

@keyframes move
{
    0%,40%{background-position: 0 0, -100vw 0}
    50%,90%{background-position: 100vw 0, 0 0}
    100%{background-position:0 0,100vw 0}/*pblm is here*/
}

<div class="move"> </div>

我只是想像您在大多数设计最好的网页中看到的那样移动图像。

问题是:一旦迭代结束，我无法从初始阶段开始循环。我希望它从左到右流动，一旦所有图像完成迭代，它必须从头开始。

1) 我可以只用 html 和 css3 实现吗？像关键帧。
2) 如果没有，我如何在没有任何外部插件的情况下使用 jquery 实现它

Answer 1

引用了很多网站。大多数人使用了一些外部js，很少有人解释滑动的可能性。

在大家的帮助下，我做到了。

$(
    function()
    {
        var slideHeight = $(".moving_container ul li").height();
        var slideWidth = $(".moving_container ul li").width();
        var slideLength = $(".moving_container ul li").length;
         /*alert(slideHeight+"tt"+slideLength);*/
        $(".moving_container").css({'width':slideWidth,'height':slideHeight}); 
        $(".moving_container ul").css({width:slideWidth*slideLength,height:slideHeight,marginLeft:-slideWidth});        
       // alert($(".moving_container").height());
        
         $('.moving_container ul li:last-child').prependTo('.moving_container ul');
        
        setInterval(
                function()
                {
                    $(".moving_container ul").animate({
                        left: + slideWidth
                    },1000,function()
                          {
                              $(".moving_container ul li:last-child").prependTo($(".moving_container ul"));
                               $('.moving_container ul').css('left', 0);
                          });
                    
                }
            ,1000);
        
    }
);

.slide1
{
    background-image: url("http://placehold.it/100x100");
}
.slide2
{
    background-image: url("http://www.billboard.com/files/charts/weekly/793-stack.svg");
}
.moving_container ul li
{
    width: 300px;
    height: 300px;
    list-style: none;
    float: left;
    position: relative;
    display: block;
}
.moving_container ul
{
    position: relative;
    height: 300px;
}
.moving_container
{
    overflow: hidden;
}
*
{
    margin: 0;
    padding: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="moving_container"> 
    <ul>
        <li class="slide1"></li>
        <li class="slide2"></li>
    </ul>
</div>

谢谢