图像不显示

你能帮我吗？由于我是使用JavaScript的新手，我从某个站点复制了代码（它可以自由复制代码，而且我很佩服编码器）。这项任务将于明天到期，所以我没有时间研究这一点。你能帮我么。顺便说一下，这是我第一次发布。请温柔回答。先谢谢你。图像不显示

这是HTML

<html> 
    <head> 
     <title>Sample</title> 
     <link rel="stylesheet" type="text/css" href="sample.css"> 
    </head> 
    <body> 
    <script type="text/javascript" src="sample.js"></script> 
    <div id="container"> 
     <h1>A really simple slideshow</h1> 
     <ul class="slider"> 
     <li><img src="images/garmin1.jpg" height="337" width="600" /></li> 
     <li><img src="images/garmin2.jpg" height="337" width="600" /></li> 
     <li><img src="images/garmin1.jpg" height="337" width="600" /></li></ul> 
     <p>I went to see <a href="http://trailers.apple.com/trailers/wb/gravity/" title="   Watch the Gravity trailer">Gravity</a> today. It was amazeballs.</p> 

</div> 
    </body> 
</html>

这是CSS

body { 
    font: 1em/125% tahoma, sans-serif; 
    background:#111; 
    color:#c8c8c8; 
} 

#container { 
    width:600px; 
    padding:20px; 
    margin:0 auto; 
} 

h1 { 
    font-size:2em; 
    padding-bottom:.5em; 
    border-bottom:1px solid #cecece; 
} 

h1, p { 
    margin: .8em 0; 
} 

a { 
    text-decoration:none; 
    font-style:italic; 
    color:#cecece; 
    transition:all .5s; 
} 

a:hover { 
    color:#eeeeee; 
} 

.slider { 
    position:relative; 
    height:337px; 
    overflow:hidden; 
} 

.slider li { 
    display:none; 
    position:absolute; 
    top:0; 
    left:0; 
}

这是JavaScript

$(function(){ 
    var $slider = $('.slider'); 
    var $slide = 'li'; 
    var $delayTime = 1000;//fade in time 
    var $transitionTime = 3000; 

    function Slides() { 
    return $slider.find($slide); 
    } 

    Slides().fadeOut(); 

    Slides().first().addClass('active').fadeIn(); 

    //Auto scroll 
    $interval = setInterval(function(){ 
    var $i = $slider.find($slide + '.active').index(); 
    Slides().eq($i) 
     .removeClass('active') 
     .fadeOut($transitionTime); 

    if(Slides().length == $i + 1) { 
     $i=-1; 
    } 

    Slides().eq($i + 1) 
     .fadeIn($transitionTime) 
     .addClass('active'); 

    }, $transitionTime + $delayTime); 


});

来源

2014-10-12 Julius Mercado

我的建议作出的jsfiddle，它是免费的）：http://jsfiddle.io – 2014-10-12 14:04:35

您在'img'标签的src中使用的URL是相对路径。确保图像位于正确的位置（在您在浏览器中调用的HTML文档旁边的'images'目录中） – 2014-10-12 14:11:26

您可以附加文件夹层次结构的图片吗？ – 2014-10-12 14:16:34

我已经收到了良好效果测试你的代码。这里是我的testing fiddle：

YOUR SLIDESHOW FIDDLE

你只需要确保：

到图像的路径是正确的
要加载的jQuery

希望这帮助！

来源

2014-10-12 14:26:45 p2or

我可以看到你以我想要的方式表现了它。我很确定图像是在正确的位置。有一件事是我不确定..如果我正在加载jquery的权利？我需要考虑什么？ – 2014-10-12 14:34:00

有几种方法可以解决这个问题。您可以将jquery托管在您的服务器上或将其加载到远程。您可以将其加载到您的网站或页脚部分。但是，第一次你必须知道的是：http://www.w3schools.com/jquery/jquery_install.asp – p2or 2014-10-12 14:42:10

加载你的页面后，检查你的浏览器控制台是否定义了'jQuery'变量。如果不是，那么JQuery不加载。既然看起来你给了我们你的整个HTML文件，我们可以看到你甚至没有调用JQuery的脚本，试着这样做。 – 2014-10-12 14:42:33

我相信你错过了将jquery库包含在你的HTML中。

只需添加下面一行到你的HTML的<head></head>，

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

为了更好地理解检查here ...

来源

2014-10-12 14:47:13

谢谢。我将该行添加到了我头部的最顶部。现在它像一个魅力。 – 2014-10-12 22:37:58

你可以接受/ upvote我的答案，然后;-) – 2014-10-13 04:50:41

回答

相关问题