Ale*_*bbe 1 html javascript css jquery fadeout
我今天刚刚开始使用JQuery和JavaScript,所以我可能会做一些非常基本的错误.基本上我有一个标记,JavaScript然后将此部分高度定义为查看器端口高度.在里面我有4个每个包含一个图像,我希望它们一个接一个地淡出.这是我提出的,它什么都不做,我不知道为什么,我试着调试它,但也找不到原因.有人能指出我做错了什么吗？我想要完成的是一个非常简单的全屏幻灯片放映,因为我找到它的任何地方都准备好使用模板,我想知道如何从头开始编写代码.
这是HTML
<!DOCTYPE html>
<html>
<head lang="pt-br">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--CSS-->
<link type="text/css" rel="stylesheet" href="css/reset.css">
<link type="text/css" rel="stylesheet" href="css/main.css">
<!--END CSS-->
<!--SCRIPT-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/jquery/my_jquery_funcs.js"></script>
<!--END SCRIPT-->
<title>Patrick Oliveira</title>
</head>
<body>
<!--HERO COMECA AQUI-->
<section id="hero-slider">
<div id="slide-1"></div>
<div id="slide-2"></div>
<div id="slide-3"></div>
<div id="slide-4"></div>
</section>
<script>
realTimeHeight();/*Atualiza em tempo real a altura do slide show*/
</script>
<!--HERO TERMINA AQUI-->
</body>
</html>
CSS
#hero-slider{
width: 100%;
}
#slide-1, #slide-2, #slide-3, #slide-4{
width: 100%;
height: inherit;
position: absolute;
}
#slide-1{
background: url("../imgs/imagem1.jpeg") no-repeat center;
background-size: cover;
}
#slide-2{
background: url("../imgs/imagem2.jpg") no-repeat center;
background-size: cover;
}
#slide-3{
background: url("../imgs/imagem3.jpg") no-repeat center;
background-size: cover;
}
#slide-4{
background: url("../imgs/imagem4.jpg") no-repeat center;
background-size: cover;
}
还有JavaScript
var i = 4;
$(document).ready(function(){
$(window).resize(function(){
realTimeHeight();
});
setTimeout(function(){
fadeItOut("#slide-"+i);
}, 2500);
});
function fadeItOut(objectID){
var fadeTime = 2500; /*time to fade out*/
$("#"+objectID).fadeOut(fadeTime);
if(i == 1){
i = 5;
}
i--;
}
function realTimeHeight(){
var altura = $(window).height();
$("#hero-slider").css("height",altura);
}
Ps:我只想学习如何从头开始制作一个,之后我会开始使用模板来节省时间.
小智 5
你非常接近,只有一个错误.
objectID已经有了哈希.基本上'#' + objectID回报##slide-4
$('#' + objectID).fadeOut(fadeTime);
应该
$(objectID).fadeOut(fadeTime);
(演示)