JQuery滑塊位置

Question

我爲我的headerslider有這個小jQuery滑動代碼。你可以看到前一張圖片下降到下一個容器。我只是想保持它所屬的地方並且平穩地滾動。主要的問題似乎是在我的HTML/CSS的原因JQuery看起來很乾淨，但不知何故$（'。row1> div：first'）會犯錯，並顯示以前的IMG。 HTML和CSS可能結構不正確，但不要介意，因爲slomo比nomo好。

http://portfolio.jogabonito.fi

\t \t $(function() { 
 

 
\t \t \t $(".row1 > div:gt(0)").hide(); 
 

 
\t \t \t setInterval(function() { 
 
\t \t \t $('.row1 > div:first') 
 
\t \t \t  .fadeOut(1500) 
 
\t \t \t  .next() 
 
\t \t \t  .fadeIn(1500) 
 
\t \t \t  .end() 
 
\t \t \t  .appendTo('.row1'); 
 
\t \t \t }, 4000); 
 

 
\t \t });

* { 
 
    box-sizing:border-box; 
 
} 
 

 
[class*="col-"] { 
 
\t float: left; 
 
\t display:block; 
 
\t text-align:center; 
 
\t 
 
\t 
 
\t 
 
} 
 

 
@font-face { 
 
\t 
 
\t src:url(fonts/BebasNeue.otf); 
 
\t font-family:BebasNeue; 
 
} 
 

 
.row2 h3 { 
 
\t 
 
\t font-family:BebasNeue; 
 
\t font-size:2.5em; 
 
\t color:white; 
 
\t background-color:black; 
 
\t opacity:0.8; 
 
\t 
 
} 
 

 
.header { 
 
\t 
 
\t font-family:BebasNeue; 
 
\t font-size:5em; 
 
\t color:white; 
 
\t background-color:black; 
 
\t opacity:0.8; 
 
\t margin:10%; 
 
\t padding:2%; 
 
\t position:absolute; 
 
    z-index: 3; 
 
\t 
 
} 
 

 
.caption { 
 
\t 
 
\t font-family:BebasNeue; 
 
\t font-size:2.5em; 
 
\t color:white; 
 
\t background-color:black; 
 
\t opacity:0.8; 
 
\t margin:20%; 
 
\t padding:2%; 
 
\t position:absolute; 
 
    z-index: 3; 
 
\t 
 
} 
 

 

 

 
.container1{ 
 
\t 
 
\t height:100vh; 
 
\t background-color:rgba(0,0,0,0.8); 
 

 
} 
 

 
.container2 { 
 
\t 
 

 
\t height:100vh; 
 
\t background-color:rgba(0,0,0,0.6); 
 
\t 
 
} 
 

 
.row1 { 
 
\t 
 
\t height:80vh; 
 
\t padding:2%; 
 
\t position:relative; 
 
\t 
 
\t 
 
\t 
 
} 
 

 
.row1 > div { 
 
\t 
 
\t width:100%; 
 
\t height:80vh; 
 
\t margin:0; 
 
\t padding:0; 
 
\t opacity:0.7; 
 
\t position:relative; 
 
\t 
 
} 
 

 
.row1 > div img { 
 
\t 
 
\t width:100%; 
 
\t height:100%; 
 
\t 
 
} 
 

 
.row2 { 
 
\t 
 
\t height:50vh; 
 
\t 
 
\t 
 
\t 
 
} 
 

 
.row3 { 
 
\t 
 
\t height:10vh; 
 
\t text-align:center; 
 
\t font-family:BebasNeue; 
 
\t color:white; 
 
\t 
 
} 
 

 

 
.col-1 { 
 
\t 
 
\t width:33.33%; 
 
\t height:100%; 
 
\t margin:8%; 
 
\t background-color:tomato; 
 
\t opacity:0.8; 
 

 
\t 
 
} 
 

 

 

 
.col-12 { 
 
\t margin:0; 
 
\t padding:0; 
 
\t width:100%; 
 
\t height:100%; 
 
\t padding:2%; 
 
}

Answer 1

你只需要在你的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; 
}