0
我为我的headerslider有这个小jQuery滑动代码。你可以看到前一张图片下降到下一个容器。我只是想保持它所属的地方并且平稳地滚动。主要的问题似乎是在我的HTML/CSS的原因JQuery看起来很干净,但不知何故$('。row1> div:first')会犯错,并显示以前的IMG。 HTML和CSS可能结构不正确,但不要介意,因为slomo比nomo好。JQuery滑块位置
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%;
}
谢谢,但仍然没有工作:■ – Rukavina
我不能看到你有改变它..它仍然相同,改变它并保存它,让我知道 – ahmdabos
你需要按Ctrl + F5清除缓存 – ahmdabos