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

Question

我在我的#banner div 上安装了 Malsup 的 Cycle，但我希望它同时更改 #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',
});