所以我試圖做一個使用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」,這可能會影響我的代碼嗎?這是我第一次嘗試做這些事情之一,所以我不知道是什麼導致它出錯。
我從我的文件工作。 – SecretWalrus
如果是這樣,將兩個googleapis.com腳本src中的'//'更改爲'http://'應該可以做到。 – samanime
真棒它現在顯示,但現在它只是不滑動。圖像閃爍,然後閃爍並保持,然後閃光並再次閃爍。 – SecretWalrus