jquery - 如何使元素在视口(viewport)之外向左浮动？

Question

我正在制作这张图片幻灯片。该容器包含 4 个元素。第 4 个元素应该在边界之外继续，这样它就会产生无限滚动的错觉。如何让元素从屏幕左侧“堆叠”到稍微超出右侧一点？

如果您明白我的意思，也许您会有更好的主意:https://gyazo.com/20ef49b4bd1987baf421e92824e82cb1

两个元素相同。

HTML:

<section class="photo-grid-slideshow">
    <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>
    <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-grid-slideshow {
    height: 300px;
    display: inline-block;
    min-width: 100%;
    position: relative;
    background: black;
    padding: none;
    overflow: hidden;
    background: #444;
}

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

脚本:

$(function(){
setInterval(function(){
        $(".photo-grid-slideshow .photo-crop:first-of-type").animate({marginLeft: "-=421px"}, 2000, "linear", function(){
            $(this).css("margin-left", 0).appendTo('.photo-grid-slideshow');
        })
    }, 2500);
});

Answer 1

您可以这样做，对 margin-left 使用负值，对 ul 的 width 使用较大的值，如下所示:

body{
  background-color: #EFEFEF;
}
.container{
  overflow: hidden;
}
.list{
  margin-left: -80px;
  list-style: none;
  width: 9999px;
  height: 160px;
  background-color: #FFDDDD;
}
.list li{
  width: 100px;
  height: 100px;
  background-color: #CDCDFF;
  padding: 20px;
  margin: 10px;
  float: left;
}

<div class="container">
  <ul class="list">
    <li>This is the first item</li>  
    <li>This is the first item</li>  
    <li>This is the first item</li>  
    <li>This is the first item</li>  
    <li>This is the first item</li>  
    <li>This is the first item</li>  
    <li>This is the first item</li>  
    <li>This is the first item</li>  
  </ul>
</div>

更新

在您编辑问题后，我添加了此更新以涵盖新问题:

$(function(){
    setInterval(function(){
        var p = $(".photo-grid-slideshow .photo-crop").css('width');
        $(".photo-grid-slideshow .photo-crop:first-of-type").animate({marginLeft: '-=' + p}, 4000, "linear", function(){
            $(this).css("margin-left", 0).appendTo('.photo-grid-slideshow');
        })
    }, 2500);
});