JQuery滑块位置

时间:2016-03-15 08:18:04

标签: javascript jquery html css

我的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%;
}




1 个答案:

答案 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;
}