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);