使用循環同時更改橫幅圖像和背景圖像

Question

我有我的#banner div正常工作的Malsup的循環安裝，但我希望它更改＃banner-container div的背景同時。基本上＃banner-container在#banner div中有一個非常模糊的圖像版本，但我希望它們在同一時間更改。任何想法如何我可以做到這一點？

的jQuery：

$('#banner') 
    .cycle({ 
    fx: 'fade', 
    speed: '1000', 
    timeout: '8000', 
    pager: '#pager', 
    next: '#next', 
    prev: '#prev', 
    cleartypeNoBg: 'true' 
}); 

HTML：

<section id="banner-container"> 
      <div id="banner-holder"> 
       <a href="#"> 
        <div id="cta"> 
         <p class="arrange">Arrange a visit</p> 
         <p class="info">If you’d like to come and see the school, click to arrange a visit!</p> 
        </div> 
       </a> 
       <div id="banner"> 
        <img src="template/banner-1.png" alt=""> 
        <img src="template/banner-1.png" alt=""> 
        <img src="template/banner-1.png" alt=""> 
        <img src="template/banner-1.png" alt=""> 
        <img src="template/banner-1.png" alt=""> 
       </div> 
       <div id="controls"> 
        <div id="prev"></div> 
        <div id="next"></div> 
       </div> 
      </div> 
      <div id="pager"></div> 
     </section> 

Answer 1

$('#banner') 
    .cycle({ 
    fx: 'scrollVert', 
    speed: '1000', 
    timeout: '8000', 
    pager: '#pager', 
    pagerAnchorBuilder: function(i) { 
     return '<a href="#"></a>'; 
    }, 
    next: '#next', 
    prev: '#prev', 
    cleartypeNoBg: 'true' 
}); 

$('#blurred-background') 
    .cycle({ 
    fx: 'fade', 
    speed: '1000', 
    timeout: '8000', 
    next: '#next', 
    prev: '#prev', 
    pager: '#pager', 
    pagerAnchorBuilder: function(i) { 
     return $('#pager a:eq('+i+')'); 
    }, 
    cleartypeNoBg: 'true', 
});