使用循环同时更改横幅图像和背景图像

Question

我在我的#banner div上安装了Cycle by 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',
});