如何使用jquery循环更改图像保持架的背景色

我正在使用jQuery.cycle.all.js在我的站点上创建图像。我想随着图像的变化/循环而改变图像的背景。很明显，我想用id闪光灯改变div的背景。怎么做，你知道吗

以下是JSFIDLE：

下面是javascript：

$('.holder').cycle({
    timeout:2000        
});

/*pause-play buttons*/
$('.pause').on('click',function() {         
    $(this).removeClass('on');
    $('.play').addClass('on');
    $('.holder').cycle('pause'); 
});
$('.play').on('click',function() {          
    $(this).removeClass('on');      
    $('.pause').addClass('on');     
    $('.holder').cycle('resume'); 
});

HTML

<div id="flash">
    <div class="wrapper">
        <div class="btns">
            <a href="#" class="play" id="">&nbsp;</a>
            <a href="#" class="pause on" id="">&nbsp;</a>
        </div>
        <div class="holder">
            <img src="../images/01.jpg" alt="image"/>
            <img src="../images/02.jpg" alt="image"/>
            <img src="../images/03.jpg" alt="image"/>
            <img src="../images/04.jpg" alt="image"/>
        </div>
    </div>      
</div>

---

更新了JSFIDLE链接

您可以在

循环前功能

中将

背景色

添加到

#flash

---

您可以在

循环前功能

中将

背景色

添加到

闪烁

---

请，提供jsfiddle请，更新你的jsfiddle，它不起作用。@alireza safian请，提供jsfiddle请，更新你的jsfiddle，它不起作用。@alireza safian那会起作用的。但是背景颜色将与图像的颜色相匹配。就像如果图像是黑色的，那么背景是黑色的。如果图像是粉红色的，那么背景也会是粉红色的。一个选项是html数据属性。检查有几个插件可以检测图像的颜色。这将工作。但是背景颜色将与图像的颜色相匹配。就像如果图像是黑色的，那么背景是黑色的。如果图像是粉红色的，那么背景也会是粉红色的。一个选项是html数据属性。检查有几个插件可以检测图像的颜色。

#flash { overflow: hidden; position: relative; height: 350px; background: #0a0f2c; }
#flash .wrapper { position: relative; height: 350px; z-index: 1; }
#flash .btns { position: absolute; overflow: hidden; top: 175px; left: 5px; z-index: 10000; }
#flash .btns a { float: left; width: 21px; height: 21px; margin: 0px 5px 0px 0px; text-decoration: none; }
#flash .btns a.play { display: block; background: url(../images/btn/btn_play_off.png) 0 0 no-repeat; }
#flash .btns a.play.on { background: url(../images/btn/btn_play_on.png) no-repeat; }
#flash .btns a.pause { background: url(../images/btn/btn_pause_off.png) 0 0 no-repeat; }
#flash .btns a.pause.on { background: url(../images/btn/btn_pause_on.png) no-repeat; }
#flash .holder { position: absolute; left: -150px; }
#flash .blue { background: #0a0f2c; }
#flash .brown { background: #3b1e16; }
#flash .black { background: #000; }

var color = 154235;
$('.holder').cycle({
    timeout: 2000,
    before: function (currSlideElement, nextSlideElement) {
        $('#flash').css({
            'background-color': '#' + color
        });
        color += 20;
    }
});