Question

我今天刚开始使用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);
}

P.s：我只是想学习如何从头开始制作一个，之后我会开始使用模板来节省时间。

Answer 1

你很亲密，只有一个错误。

objectID已经有了哈希值。基本上'#' + objectID会返回##slide-4

$('#' + objectID).fadeOut(fadeTime);

应该是

$(objectID).fadeOut(fadeTime);

（Demo）

为什么我的图片没有出道？

1 个答案: