全背景圖像與淡入淡出效果

Question

我正在創建一個網站與完整圖像的背景，不斷變化使用淡入淡出效果。這裏是我的腳本代碼

$(document).ready(
      function(){ 

       $('div#homeGalleryImg').innerfade({ 
        speed: 1500, 
        timeout: 5000, 
        type: 'sequence', 
        containerheight: '220px' 
       }); 


     }); 

和我的HTML代碼

<div class="fullScreen" id="homeGalleryImg"> 
    <img src="images/home1.jpg" class="fullImage" /> 
    <img src="images/home2.jpg" class="fullImage" /> 
    <img src="images/home3.jpg" class="fullImage" /> 
</div> 

現在我想用圖像的大小調整爲我創建了一個功能

cFns.push(function(){ 


resizeFullScreens = function() { 

    var minSizeX = window.getScrollWidth(); 
      var minSizeY = window.getSize().y; 
      var deferResize = Browser.ie; 

      $$('.fullScreen').setStyle('height', minSizeY + 'px'); 

      var resize = function() { 
      minSizeY  = window.getScrollHeight(); 
      $$('.fullScreen').setStyle('height', minSizeY + 'px'); 

      $$('.fullImage').each(function(item, index) { 
       var c = item.getCoordinates(); 
       var iR = c.width/c.height; 

       if (minSizeX/minSizeY > iR) { 
        iW = minSizeX; 
        iH = minSizeX/iR; 
       } else { 
        iH = minSizeY; 
        iW = minSizeY*iR; 
       } 

       item.setStyles({ 
        'height': iH + 'px', 
        'width': iW + 'px' 
        }); 

       item.setPosition({ 
         x: -(iW - minSizeX)/2, 
         y: -(iH - minSizeY)/2 
        }); 
       }); 
      } 

      if (deferResize) { 
       resize.delay(50); 
      } else { 
       resize(); 
      } 
     } 

    window.addEvent('resize',resizeFullScreens); 
    }); 

，每次調用這個函數在負載和調整大小

cFns.push(function() { 
    window.addEvent('resize', resizeFullScreens); 
    window.addEvent('load', resizeFullScreens); 
    }); 

現在它可以正常工作，但是當背景圖像發生變化時，我在此處使用淡入淡出效果，因此新圖像無法根據瀏覽器尺寸調整大小。我想要的是當背景圖像改變時調用resizeFullScreens函數。

請幫我...

Answer 1

jQuery的非終點直道是你的朋友：http://srobbin.com/jquery-plugins/backstretch/