javascript - 带有内联 block 的无限滚动幻灯片？

Question

所以很可能只有我的一些代码是错误的。我已经尝试了好几个小时才把它弄好，所以现在我要将我的信仰转向互联网的忠实用户! ;)

所以我想做的是将容器中最左边的对象移到屏幕外，然后附加到容器中的最后一个元素，让它看起来像是永远滚动。截至目前，我只有 3 个元素可以清楚地查看它是否有效。我做错了什么？

我的 html:

<section class="photo-grid-slideshow">
    <div class="photo-crop">
        <h3>I wanna
            <div class="xs-spacer"></div>
            <a class="med-btn btn-white">Read more</a>
        </h3>
        <div class="photo-grid-container" style="background-image: url('Images and videos/odesza1.jpg');"></div>
    </div>
    <div class="photo-crop">
        <h3>Dance
            <div class="xs-spacer"></div>
            <a class="med-btn btn-white">Read more</a>
        </h3>
        <div class="photo-grid-container" style="background-image: url('Images and videos/odesza3.jpg');"></div>
    </div>
    <div class="photo-crop">
        <h3>With you
            <div class="xs-spacer"></div>
            <a class="med-btn btn-white">Read more</a>
        </h3>
        <div class="photo-grid-container" style="background-image: url('Images and videos/odesza2.png');"></div>
    </div>
</section>

我的CSS:

.photo-crop {
    display: inline-block;
    overflow: hidden;
    float: left;
    width: calc(100% / 3);
    height: 100%;
    line-height: 100%;
    margin: 0;
    margin-right: 0;
    padding: 0;
    display: inline-block;
    position: relative;
    left: 0;
    right: 0;
    background-position: center center;
    background-size: cover;
    transition: all 0.2s;
    text-align: left;
}

.photo-grid-slideshow {
    height: 300px;
    display: inline-block;
    min-width: 100%;
    position: relative;
    background: black;
    padding: none;
    overflow: hidden;
    background: #444;
}

我的javascript:

 $(function () {
    var timer = setInterval(function() {
        $(".photo-crop:first-child").animate({marginLeft: '-=33vw'}, 2000, "linear", function() {
            $('this').Css("margin-left", 0).appendTo('.photo-crop:last-child');
        });
    }, 2000);
 });

Answer 1

试一试:

$(function() {
  var timer = setInterval(function() {
    $(".photo-crop:first-child").animate({
      marginLeft: '-=33vw'
    }, 2000, "linear", function() {
      $(this).css("margin-left", 0).appendTo('.photo-crop:last-child');
    });
  }, 2000);
});