我正在制作这张幻灯片。容器装有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);
});
答案 0 :(得分:0)
您可以使用if(filename == "Ace.jpg") {
// display label
label.text = "Ace"
}
的负值和margin-left
width
的较大值来执行此操作:
ul
&#13;
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;
}
&#13;
在您编辑问题后,我添加了此更新以涵盖新问题:
<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>