javascript - 添加淡入淡出以使用javascript更改背景

Question

我有以下使用 jquery 更改 div 背景图像的代码，我需要帮助来向代码添加淡入淡出，以便图像发生一些变化

这是代码

jQuery(window).load(function(){
    var images = ['blured/1.jpg','blured/2.jpg'];
    var i = 0;
    var timeoutVar;

    function changeBackground() {
        clearTimeout(timeoutVar); // just to be sure it will run only once at a time

        jQuery('#maincont').css('background-image', function() {
            if (i >= images.length) {
               i=0;
            }
            return 'url(' + images[i++] + ')';      
        });

        // call the setTimeout every time to repeat the function
        timeoutVar = setTimeout(changeBackground, 6000);
    }

    // Call it on the first time and it will repeat
    changeBackground();        
});

任何帮助都会很棒!我只需要更改背景图像，而不会使内部 div 褪色，这就是 html

   <div class="maincont" id="maincont">

   <div class="containersrch">

   <h1 class="lagro">some title</h1>

   <div class="joinus">

   <span><a href="join.php">JOIN</a></span>

   </div>

   </div>

Answer 1

也许这就是你想要的？

$(function(){
  var imgId = $('#maincont'), imgCount = 1, imgLast = 2;
  setInterval(function(){
    imgId.fadeOut('slow', function(){
      if(++imgCount > imgLast)imgCount = 1;
      imgId.css('background', "url('blured/"+imgCount+".jpg')");
      imgId.fadeIn('slow');
    });
  }, 6000);
});

现在您可以拥有多个图像，只需将 imgLast 更改为最后一个数字，并确保它们在您的 blured 文件夹中具有正确的 URL。当然，上面的代码假定您使用的是 .jpg。我实际上推荐.png的无损压缩，但是如果图像被拍摄为.jpg就没有关系了。