文章/答案/技术大牛

发布

社区首页 >问答首页 >为什么我的图像不放出来？

问为什么我的图像不放出来？
EN

Stack Overflow用户

提问于 2015-06-14 01:04:20

回答 1查看 64关注 0票数 1

我今天刚开始学习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:我只想学习如何从头开始制作一个，然后我将开始使用模板来节省时间。

javascript

jquery

html

css

fadeout

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-06-14 01:12:01

你离得很近，只有一个错误。

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

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

应该是

$(objectID).fadeOut(fadeTime);

(Demo)

票数 5

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/30825065

复制

相似问题

问为什么我的图像不放出来？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么我的图像不放出来？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么我的图像不放出来？
EN