周期的に画像をアニメーション化するにはどうすればよいですか？ `

debugcn 投稿 Dev

ギブス

.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を使用してそれを達成するにはどうすればよいですか？

ギブス

多くのサイトを紹介しました。ほとんどの人はいくつかの外部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>

ありがとう

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]