Почему у меня нет изображений?

Я только что начал работу с 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: Я просто хочу, чтобы узнать, как сделать с нуля, после чего Я начну использовать шаблоны для экономии времени.

источник

2015-06-14 Alexandre Krabbe