在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

首先，您可以将该代码重写为大约7倍。使用循环和东西。

关于你的问题：

我怀疑它与你有一个无限循环有关，那就是一堆褪色的定时器。因为你不断循环并创建越来越多的计时器，你将得到不可预测的结果，例如一些图像没有被使用。

我怀疑你不明白fadeOut和fadeIn是如何工作的。这些调用排队动画，他们不阻止执行！所以实际上你一直排队等待很多东西，一直。

此外，您应该考虑使用firebug进行调试

Answer 2

你可能想查看一个jQuery插件来获得这个效果;那里有很多“幻灯片”风格的插件。例如，请参阅Cycle。

Answer 3

在这方面必须支持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 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>