圖像不顯示

你能幫我嗎？由於我是使用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

回答

相關問題