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);
});

带内联块的无限滚动幻灯片？

1 个答案: