我的headerlider有这个小jquery滑块代码。你可以看到前一个图像下降到下一个容器。我只想把它保持在它所属的位置并滚动平滑。主要问题似乎是在我的html / css中导致JQuery看起来很干净但不知何故$(' .row1> div:first')出错并显示之前的img。 HTML和CSS可能没有正确的结构,但不要介意,因为slomo比nomo更好。
http://portfolio.jogabonito.fi
$(function() {
$(".row1 > div:gt(0)").hide();
setInterval(function() {
$('.row1 > div:first')
.fadeOut(1500)
.next()
.fadeIn(1500)
.end()
.appendTo('.row1');
}, 4000);
});

* {
box-sizing:border-box;
}
[class*="col-"] {
float: left;
display:block;
text-align:center;
}
@font-face {
src:url(fonts/BebasNeue.otf);
font-family:BebasNeue;
}
.row2 h3 {
font-family:BebasNeue;
font-size:2.5em;
color:white;
background-color:black;
opacity:0.8;
}
.header {
font-family:BebasNeue;
font-size:5em;
color:white;
background-color:black;
opacity:0.8;
margin:10%;
padding:2%;
position:absolute;
z-index: 3;
}
.caption {
font-family:BebasNeue;
font-size:2.5em;
color:white;
background-color:black;
opacity:0.8;
margin:20%;
padding:2%;
position:absolute;
z-index: 3;
}
.container1{
height:100vh;
background-color:rgba(0,0,0,0.8);
}
.container2 {
height:100vh;
background-color:rgba(0,0,0,0.6);
}
.row1 {
height:80vh;
padding:2%;
position:relative;
}
.row1 > div {
width:100%;
height:80vh;
margin:0;
padding:0;
opacity:0.7;
position:relative;
}
.row1 > div img {
width:100%;
height:100%;
}
.row2 {
height:50vh;
}
.row3 {
height:10vh;
text-align:center;
font-family:BebasNeue;
color:white;
}
.col-1 {
width:33.33%;
height:100%;
margin:8%;
background-color:tomato;
opacity:0.8;
}
.col-12 {
margin:0;
padding:0;
width:100%;
height:100%;
padding:2%;
}

答案 0 :(得分:0)
您只需在css中更新此内容:
.row1 > div {
width:100%;
height:80vh;
margin:0;
padding:0;
opacity:0.7;
position:absolute;
}
.row1 > div img {
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
}