jQuery圖像循環不顯示任何圖像

我想在jQuery中創建一個非常基本的圖像庫。目標是讓3張圖像以連續順序淡入和淡出。因此，圖像1顯示，淡入圖像2等，然後整個事情再次循環。jQuery圖像循環不顯示任何圖像

我的HTML代碼到目前爲止如下：

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Slider</title> 
<style type="text/css"> 

.slider{ 
    width: 2848px; 
    height: 2136px; 
    overflow: hidden; 
    margin: 30px auto; 
} 

.slider img{ 
    width:2848px; 
    height:2136px; 
    display:none; 
} 

</style> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script> 
<script src="Slider2.js"></script> 

</head> 
<body onload="Slider2"();> 
<div class="slider"> 
     <img id="1" src="31.jpg" border="0" alt="city"/> 
     <img id="2" src="2vrtigo2.jpg" border="0" alt="roof"/> 
     <img id="3" src="3.jpg" border="0" alt="sea"/> 
</div> 
</body>

而jQuery代碼如下所示：

function Slider2() 
{ 
var total = $(".slider img").size(); 

for (i=1; i<=total; i+=1) 
{ 
    $(".slider #"+i).fadeIn(600); 
    $(".slider #"+i).delay(2000).hide; 
}}

快速語法筆記，我用我的最後++也嘗試For循環的論點。此代碼的結果是一個空白的白頁。我知道一些HTML正在編譯，因爲巨大的2848x2136 div在瀏覽器上創建了滾動條。

如果有人可以幫助我，那將是極大的讚賞。很顯然，我對網絡編程相對陌生，並且很想深入瞭解爲什麼這種方式不起作用。謝謝！

來源

2012-12-02 Robby

見尼爾森的回答語法問題，而且你的邏輯是完全錯誤的，你的jQuery將顯示在一次所有圖像，你需要在你的延遲推出的乘數。

你在延遲中需要一個乘數的原因是，當你循環遍歷for循環中的元素時，它不運行i = 1的循環，然後在運行i = 2的循環之前等待它結束，而是在幾毫秒內全部運行它們，以便動畫能夠一個接一個地運行，以便將每個動畫延遲一段時間。在我編輯的代碼中，所有的fadeIn一次發生，然後在fadeOut被觸發之前每個圖像上有不同的延遲。（）/ fadeOut（）： hide（）/ show（）對元素的display屬性起作用，將其設置爲none或block 。 fadeIn（）/ fadeOut（）對元素不透明度設置起作用，在0和1之間對其進行動畫處理。您需要選擇一件事進行更改。

我有這樣的事情，你想對爵士小提琴的工作是什麼：http://jsfiddle.net/9mgu7/1/

對不起，我用你的代碼搞砸，因爲JS提琴沒有似乎觸發的onload功能，我需要的是適應屏幕上的圖像 - 也請意識到我所做的事情無法正常工作，因爲我沒有在我的延遲中考慮過時差/延誤時間，所以動畫中的重疊部分會隨着時間的推移變得更糟 - 但這是您可以隨身攜帶的東西。：

HTML：

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Slider</title> 
</head> 
<body> 
    <div class="slider"> 
     <img id="img1" src="http://placehold.it/350x150/dddddd" border="0" alt="city"/> 
     <img id="img2" src="http://placehold.it/350x150/444444" border="0" alt="roof"/> 
     <img id="img3" src="http://placehold.it/350x150/111111" border="0" alt="sea"/> 
    </div> 
</body>

CSS：

.slider{ 
    width: 350px; 
    height: 150px; 
    overflow: hidden; 
    margin: 30px auto; 
    display:block;  
} 
.slider img{ 
    width:350px; 
    height:150px; 
    opacity:1; 
}

JS：也

$(document).ready(function(){ 
    var total = $(".slider img").size(); 
    for (i=1; i<=total; i++) 
    { 
     $(".slider #img"+i).fadeIn(600).delay(2000*i).fadeOut(600);   
    } 
});

來源

2012-12-02 23:33:32 WebweaverD

感謝您的詳細解釋，我已經對我的代碼進行了相關更改，現在它應該能夠正常工作，所以非常感謝您清除它！一個簡短的問題，如果你不介意，乘數是做什麼做這項工作？ – Robby

我已經更新了我的答案，並試圖解釋延遲乘數的目的。快樂的編碼。 – WebweaverD

太棒了，非常感謝。你極大地幫助我理解這是如何工作的。 – Robby

你缺乏的方法hide()的結束PARAMS：

$(".slider #"+i).delay(2000).hide; 
           ^^---Here, must be hide()

你也可以寫兩行作爲一個單一的一個，比如這個：

$(".slider #"+i).fadeIn(600).delay(2000).hide();

UPDATE：
還，你的下面一行：

<body onload="Slider2"();>

應該是這樣的：

<body onload="Slider2();">

來源

2012-12-02 23:02:04 Nelson

注意，開始與一些的ID是無效的HTML – McGarnagle

謝謝你，我」已將代碼更改爲您的單行建議，但是我仍然遇到同樣的問題。 – Robby

@ user1871097我已用新的發現錯誤更新了我的答案。 – Nelson

jQuery圖像循環不顯示任何圖像

回答

相關問題