无限自动滚动图像

Question

我想制作一个自动滚动的图像。这是我尝试过的。

Scrolling image

这是我的代码。

<style> 
   .scroll_container {
        width: 100%;
        height: 200px;
        /* background-color: #ddd; */
        overflow: hidden;
    }
    .ads_box_holder {
        width: 100%;
        white-space: nowrap;
        min-width:100%; 
        width: auto !important; 
        width: 100%;
    }
    .ads_box {
        display: inline-block;
        position: relative;
        top: 0;
        left: 0;
        width: 190px;
        height: 200px;
        padding: 10px 10px;
        margin-right: 10px;
    }
    .ads_box img {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        animation: slide 20s infinite;
    }

    @keyframes slide {
        0%{ transform:translateX(0px) }
        10%{ transform:translateX(-200px) }
        20%{ transform:translateX(-400px) }
        30%{ transform:translateX(-600px) }
        40%{ transform:translateX(-800px) }
        50%{ transform:translateX(-1000px) }
        60%{ transform:translateX(-1200px) }
        70%{ transform:translateX(-1400px) }
        80%{ transform:translateX(-1600px) }
        90%{ transform:translateX(-1800px) }
        100%{ transform:translateX(0px) }
    }
<style>
<div class="scroll_container">
    <div class="ads_box_holder">
        <div class="ads_box"><img src="images/ads.png"></div>
        <div class="ads_box"><img src="images/blur.jpg"></div>
        <div class="ads_box"><img src="images/foot.jpg"></div>
        <div class="ads_box"><img src="images/body.jpg"></div>
        <div class="ads_box"><img src="images/s.png"></div>
        <div class="ads_box"><img src="images/menu.jpg"></div>
        <div class="ads_box"><img src="images/face.jpg"></div>
        <div class="ads_box"><img src="images/c.jpeg"></div>
        <div class="ads_box"><img src="images/foot2.jpg"></div>
        <div class="ads_box"><img src="images/b.jpg"></div>
    </div>
</div>

现在，我使用了keyframe css。所以，当图像一个接一个地向左移动时，右侧有空白区域，如下图所示

---------
|       |
| image |  empty space are left here
|       |
---------

实际上，我想动态添加我的图像，图像可能超过 20 张。所以，当动态添加图像时，我不确定这个keyframes 是否正常。

我想将那个空白区域替换为该框内的所有图像。 因此，没有剩余空间，图像总是一个接一个地滚动。 但是，当ads_box_holder div 内有空间时，我不知道如何替换图像。

我删除了 css 动画，并尝试使用这样的 javascript。

<script>
$(document).ready(function(){
    var childCount = $(".ads_box_holder :visible").children().length;
    var move = 0;
    var hideImageTime = 0;
    window.setInterval(function(){
        hideImageTime += 1;
        move += 200;
        $(".ads_box_holder").css({
            "margin-left":-move+"px",
        });
        if(hideImageTime > childCount) {
            jQuery('.ads_box_holder .ads_box').each(function(){
                var next = jQuery(this).next();
                count += 1;
                if (!next.length) {
                    next = jQuery(this).siblings(':first');
                }
                next.children(':first-child').clone().appendTo(jQuery(this));
            });
        }
    },2000);
});
</script>

但是当我使用keyframe css 时结果是一样的。

注意：图像移动样式没问题，但我只想在ads_box_holder 内找到空白空间时放置所有图像。

我不知道如何实现我想要的。非常感谢您的任何建议。

Answer 1

我终于得到了我想要的。克隆第一个孩子并在ads_box_holder 的最后追加并删除第一个孩子。

$(document).ready(function(){

        function animation() {
            $('.ads_box_holder').children(':first').clone().appendTo(".ads_box_holder");
            $('.ads_box_holder').children(':first').css({
                "margin-left":"-204px",
                "-webkit-transition": "all 0.7s ease-out",
                   "-moz-transition": "all 0.7s ease-out",
                    "-ms-transition": "all 0.7s ease-out",
                     "-o-transition": "all 0.7s ease-out",
                        "transition": "all 0.7s ease-out"
            });
            setTimeout(function(){$('.ads_box_holder').children(':first').remove()},1500);
        }
        window.setInterval(animation,2000);
});

我希望它对某人有所帮助。