2014-01-29 36 views
0

所以我試圖做一個使用JS的幻燈片,我已經要求幫助,它的工作在JSFiddle,但它不會在我的本地環境中工作,所以我想知道如果我有一些措辭或某個地方有人可以幫我看看的地方有什麼問題。Html沒有連接到js

HTML5

<!DOCTYPE html> 
<html> 

<head> 
    <title>slider</title> 

    <link rel="stylesheet" href="style.css" type="text/css"/> 

    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> 
    <meta name="viewport" content="with=device-width, initial-scale=1.0"> 

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> 
    <script type="text/javascript" src="slider.js"></script> 
</head> 

<body onload="slider()"> 

    <div class="slider"> 
     <img id="1" src="slide_image1.jpg" alt="TV Deals"/> 
     <img id="2" src="slide_image2.jpg" alt="Furniture Deals"/> 
     <img id="3" src="slide_image3.jpg" alt="Electronic Deals"/> 
    </div> 

</body> 
</html> 

CSS3

.slider { 
    width: 990px; 
    height: 270px; 
    overflow: hidden; 
    margin: 30px auto; 
    background-image: url('ajax-loader.gif'); 
    background-repeat: no-repeat; 
    background-position: center; 
} 

.slider img{ 
    border: 0; 
    display: none; 
} 

的JavaScript

$(document).ready(function() { 
    slider(); 
}); 

function slider(){ 
    var count = 1; 

    $('#1').show(); 

    (function slide(){ 
     $('.slider img').hide(); 

     if (count > 3) {count = 1;} // makes this a loop 

     $('#'+count).fadeIn('slow'); 
     count += 1; 

     setTimeout(function() { 
      slide(); 
     }, 5000); 
    })(); 
} 

是我的 「的onload」 命令是否正確?我使用Web Expression作爲設計器,我實際上通過url路徑爲每個圖像選擇了圖像,因此我知道路徑是正確的(對js做同樣的事情)。 JavaScript本身被稱爲「slider.js」,這可能會影響我的代碼嗎?這是我第一次嘗試做這些事情之一,所以我不知道是什麼導致它出錯。

回答

0

當你說本地環境時,它是否在file://協議下運行在你的電腦上? (也就是說,當你看到它是類似file://C:\My\Files\index.html的東西)還是運行在http://協議上的服務器?

如果是前者,則需要明確地將腳本srcs從//更改爲http:////的意思是「使用該頁面正在使用的任何協議」,這意味着它會嘗試file://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js,這顯然不存在。

這是唯一在我身上跳出來,因爲在本地工作時常見的錯誤。

+0

我從我的文件工作。 – SecretWalrus

+0

如果是這樣,將兩個googleapis.com腳本src中的'//'更改爲'http://'應該可以做到。 – samanime

+0

真棒它現在顯示,但現在它只是不滑動。圖像閃爍,然後閃爍並保持,然後閃光並再次閃爍。 – SecretWalrus