不通過jQuery循環

Question

好吧，我只是無法弄清楚這一點。在查看並重新查看我的代碼可能是幾小時後，我仍然沒有更接近發現這種奇怪的行爲。

它與背景的褪色有關，並且它在數組中列出的圖像中有12個左右。

正在離開的圖像是：BG6，bg36，BG13，BG8，BG14，BG15，bg24，bg29，bg27，BG9，bg19，BG3

主代碼第1部分：

insertLayer(); 

var bg1 = "#000 url('./images/background/image_1.jpg') no-repeat fixed center center"; 
var bg2 = "#000 url('./images/background/image_2.jpg') no-repeat fixed center center"; 
var bg3 = "#000 url('./images/background/image_3.jpg') no-repeat fixed center center"; 

var bg4 = "#000 url('./images/background/image_4.jpg') no-repeat fixed center center"; 
var bg5 = "#000 url('./images/background/image_5.jpg') no-repeat fixed center center"; 
var bg6 = "#000 url('./images/background/image_6.jpg') no-repeat fixed center center"; 

var bg7 = "#000 url('./images/background/image_7.jpg') no-repeat fixed center center"; 
var bg8 = "#000 url('./images/background/image_8.jpg') no-repeat fixed center center"; 
var bg9 = "#000 url('./images/background/image_9.jpg') no-repeat fixed center center"; 

var bg10 = "#000 url('./images/background/image_10.jpg') no-repeat fixed center center"; 
var bg11 = "#000 url('./images/background/image_11.jpg') no-repeat fixed center center"; 
var bg12 = "#000 url('./images/background/image_12.jpg') no-repeat fixed center center"; 

var bg13 = "#000 url('./images/background/image_13.jpg') no-repeat fixed center center"; 
var bg14 = "#000 url('./images/background/image_14.jpg') no-repeat fixed center center"; 
var bg15 = "#000 url('./images/background/image_15.jpg') no-repeat fixed center center"; 

var bg16 = "#000 url('./images/background/image_16.jpg') no-repeat fixed center center"; 
var bg17 = "#000 url('./images/background/image_17.jpg') no-repeat fixed center center"; 
var bg18 = "#000 url('./images/background/image_18.jpg') no-repeat fixed center center"; 

var bg19 = "#000 url('./images/background/image_19.jpg') no-repeat fixed center center"; 
var bg20 = "#000 url('./images/background/image_20.jpg') no-repeat fixed center center"; 
var bg21 = "#000 url('./images/background/image_21.jpg') no-repeat fixed center center"; 

var bg22 = "#000 url('./images/background/image_22.jpg') no-repeat fixed center center"; 
var bg23 = "#000 url('./images/background/image_23.jpg') no-repeat fixed center center"; 
var bg24 = "#000 url('./images/background/image_24.jpg') no-repeat fixed center center"; 

var bg25 = "#000 url('./images/background/image_25.jpg') no-repeat fixed center center"; 
var bg26 = "#000 url('./images/background/image_26.jpg') no-repeat fixed center center"; 
var bg27 = "#000 url('./images/background/image_27.jpg') no-repeat fixed center center"; 

var bg28 = "#000 url('./images/background/image_28.jpg') no-repeat fixed center center"; 
var bg29 = "#000 url('./images/background/image_29.jpg') no-repeat fixed center center"; 
var bg30 = "#000 url('./images/background/image_30.jpg') no-repeat fixed center center"; 

var bg31 = "#000 url('./images/background/image_31.jpg') no-repeat fixed center center"; 
var bg32 = "#000 url('./images/background/image_32.jpg') no-repeat fixed center center"; 
var bg33 = "#000 url('./images/background/image_33.jpg') no-repeat fixed center center"; 

var bg34 = "#000 url('./images/background/image_34.jpg') no-repeat fixed center center"; 
var bg35 = "#000 url('./images/background/image_35.jpg') no-repeat fixed center center"; 
var bg36 = "#000 url('./images/background/image_36.jpg') no-repeat fixed center center"; 

var bg37 = "#000 url('./images/background/image_37.jpg') no-repeat fixed center center"; 
var bg38 = "#000 url('./images/background/image_38.jpg') no-repeat fixed center center"; 
var bg39 = "#000 url('./images/background/image_39.jpg') no-repeat fixed center center"; 

var bg40 = "#000 url('./images/background/image_40.jpg') no-repeat fixed center center"; 
var bg41 = "#000 url('./images/background/image_41.jpg') no-repeat fixed center center"; 

var images = [bg30, bg34, bg6, bg7, bg10, bg36, bg33, bg26, bg14, bg5, bg40, bg13, bg16, bg23, bg8, bg18, bg32, bg14, bg31, bg15, bg24, bg20, bg22, bg29, bg37, bg41, bg27, bg25, bg12, bg9, bg4, bg21, bg19, bg1, bg28, bg3, bg2, bg39, bg38]; 

var current = 0; 

for (var a = 0; a < 39; a++) 
{ 
$('#fade1').fadeOut(16000, function() 
{ 
    $('#fade1').css("background", images[current]); 
    current++; 
}); 

if (current > 38) 
{ 
    current = 0; 
} 

$('#fade1').fadeIn(16000, function() 
{ 
    $('#background').css("background", images[current]); 
    current++; 
}); 

if (current > 38) 
{ 
    current = 0; 
} 

$('#fade1').fadeOut(16000, function() 
{ 
    $('#fade1').css("background", images[current]); 
    current++; 
}); 

if (current > 38) 
{ 
    current = 0; 
} 
} 

主要代碼第2部分：

var backgroundFader = function(element, bgClasses, nextChange) 

{ 
this.cssProps = {'position' : 'relative', 'z-index' : 100}; 
this.bgs = ['bg1', 'bg2', 'bg3', 'bg4', 'bg5', 'bg6', 'bg7', 'bg8', 'bg9', 'bg10', 'bg11', 'bg12', 'bg13', 'bg14', 'bg15', 'bg16', 'bg17', 'bg18', 'bg19', 'bg20', 'bg21', 'bg22', 'bg23', 'bg24', 'bg25', 'bg26', 'bg27', 'bg28', 'bg29', 'bg30', 'bg31', 'bg32', 'bg33', 'bg34', 'bg35', 'bg36', 'bg37', 'bg38', 'bg39', 'bg40', 'bg41']; 

this.element = element || ".bg_fader"; 
}; 

function insertLayer(element) 
{ 
var cssProps = {'position' : 'relative', 'z-index' : 100}; 
var bgs = ['bg1', 'bg2', 'bg3', 'bg4', 'bg5', 'bg6', 'bg7', 'bg8', 'bg9', 'bg10', 'bg11', 'bg12', 'bg13', 'bg14', 'bg15', 'bg16', 'bg17', 'bg18', 'bg19', 'bg20', 'bg21', 'bg22', 'bg23', 'bg24', 'bg25', 'bg26', 'bg27', 'bg28', 'bg29', 'bg30', 'bg31', 'bg32', 'bg33', 'bg34', 'bg35', 'bg36', 'bg37', 'bg38', 'bg39', 'bg40', 'bg41']; 

var element = element || ".bg_fader"; 

var layerel = element.substr(1) + "-layer"; 
if(jQuery("#"+layerel).length == 0) 
{ 
    jQuery("<div id='"+layerel+"'></div>") 
    .insertAfter(element) 
    .nextAll().appendTo("#"+layerel) 
    .parent().css(cssProps); 
} 
} 

感謝您的幫助！

Answer 1

必須在這方面與mkoryak一起。代碼過度複雜化了這個問題。

這是我會怎麼做（這當然是完全未經測試）：

var fade_time = 1000; 
var wait_time = 15000; 
var curr = 0; 
var last = 41; 
var bg = $("#background"); 

function do_fade() { 
    curr++; 
    if (curr > last) { 
     curr = 1; 
    } 
    bg.fadeOut(fade_time, function() { 
     // switch your image here. something like this 
     bg.css('background-image','./images/background/image_' + curr + '.jpg'); 
     bg.fadeIn(fade_time); 
    } 
} 

id = setInterval(do_fade, wait_time); 

希望這對你的作品。

Answer 2

首先，您可以將該代碼重寫爲小約7倍。使用循環和東西。

在你的問題：

我懷疑它是與你有一個無限循環，也就是說，套一堆淡出一些東西定時器的。因爲你經常循環並創建越來越多的定時器，你將會得到不可預知的結果，比如一些圖像沒有被使用。

我懷疑你不知道fadeOut和fadeIn是如何工作的。那些電話隊列動畫，他們不會阻止執行！所以實際上你總是在排隊等待一大堆東西，一直在。

此外，你應該考慮使用螢火蟲調試

Answer 3

你可能想尋找到一個jQuery插件來獲得這種效果;那裏有很多「幻燈片」風格的插件。例如，請參閱Cycle。

Answer 4

只是想我會提到這個片段。背景圖像應該和普通圖像一樣。如果你有很多圖片，我不會在頁面加載時預加載所有圖片，而是使用一些隊列系統。

<script type="text/javascript"> 
     <? 
     $i = 0; 
     if ($handle = opendir('./images/background')) { 
      while (false !== ($file = readdir($handle))) { 
       if ($file != "." && $file != "..") { 
        echo "preloadimage_".$i." = new Image();\n\t"; 
        echo "preloadimage_".$i++.".src = \"/images/background/".$file."\";\n\t"; 
       } 
      } 
      closedir($handle); 
     } 
     ?> 
    </script>