jQuery的背景图像旋转脚本 - 希望修改

Question

我用这个可爱的小jQuery脚本旋转背景图像：

http://www.diplo.co.uk/blog/2011/2/23/simple-jquery-background-image-rotator.aspx

jQuery的问题是在这里：

(function($) 
{ 
    $.fn.extend({ 
     bgrotate: function(options) 
     { 
      var defaults = { 
       delay: 1000, 
       images: [], 
       imagedir: "/images/" 
      } 

      var o = $.extend(defaults, options); 
      var $obj = $(this); 
      var cache = []; 
      var i = 0; 
      var preCache = true; 

      return this.each(function() 
      { 
       setInterval(function() { setBack($obj, o.images, o.imagedir) }, o.delay); 
      }); 

      function setBack(elem, backgrounds, imagedir) 
      { 
       elem.css("background-image", "url(" + imagedir + backgrounds[i] + ")"); 
       i++; 
       if (i == backgrounds.length) 
       { 
        i = 0; 
        preCache = false; 
       } 
       if (preCache) 
       { 
        var cacheImage = document.createElement('img'); 
        cacheImage.src = imagedir + backgrounds[i]; 
        cache.push(cacheImage); 
       } 
      } 
     } 
    }); 
})(jQuery); 

这很好，但我试图在图像旋转之间添加淡入淡出效果。

任何指针或线索，如何/在哪里衰落元素可能被添加到这个脚本？

非常感谢 戴夫

Answer 1

既然你不能动画背景图片，你必须创建一个新的元素，并把它原来的落后，之后淡出旧元素。

DEMO jsfiddle

既然你要复制的元素，它不会body

/* Simple jQuery background image rotator plug-in by Dan 'Diplo' Booth */ 
(function($) 
{ 
    $.fn.extend({ 
     bgrotate: function(options) 
     { 
      var defaults = { 
       delay: 1000, 
       images: [], 
       imagedir: "/images/" 
      } 

      var o = $.extend(defaults, options); 
      var $obj = $(this); 
      var cache = []; 
      var i = 0; 
      var preCache = true; 

      return this.each(function() 
      { 
       setTimeout(function() { setBack($obj, o.images, o.imagedir) }, o.delay); 
      }); 

      function setBack(elem, backgrounds, imagedir) 
      { 
       //elem.css("background-image", "url(" + imagedir + backgrounds[i] + ")"); 
       var newElement = elem.clone(); 
       $(newElement).css({'background-image': "url(" + imagedir + backgrounds[i] + ")"}) 
       $(newElement).css("position","absolute"); 
       $(newElement).css("top",$(elem).position().top + "px"); 
       $(newElement).css("left",$(elem).position().left + "px"); 
       $(newElement).hide(); 
       $(elem).prop("id", $(elem).prop("id") + "temp" + i); 
       $(elem).after(newElement); 
       $(newElement).fadeIn('slow', function() { 
        $(newElement).css("position",$(elem).css("position")); 
        $(newElement).css("top",$(elem).css("top")); 
        $(newElement).css("left",$(elem).css("left")); 
        $(elem).remove(); 
        setTimeout(function() { setBack($(newElement), o.images, o.imagedir) }, o.delay); 
       }); 
       i++; 
       if (i == backgrounds.length) 
       { 
        i = 0; 
        preCache = false; 
       } 
       if (preCache) 
       { 
        var cacheImage = document.createElement('img'); 
        cacheImage.src = imagedir + backgrounds[i]; 
        cache.push(cacheImage); 
       } 
      } 
     } 
    }); 
})(jQuery);