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文件夹中包含正确的网址。当然，上面的代码假设您正在使用.jpg。我实际上推荐.png的无损压缩，但如果图像被视为.jpg则无关紧要。

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

1 个答案: