使用幻灯片 jQuery Cycle2 更改背景颜色答案

【问题标题】：Change Background Color with Slides jQuery Cycle2使用幻灯片 jQuery Cycle2 更改背景颜色
【发布时间】：2013-01-08 22:57:24
【问题描述】：

我正在为网站上的某些滑块使用 Cycle2 插件 (http://jquery.malsup.com/cycle2/)，并且需要从当前幻灯片中包含的每个图像中检测内联样式，然后将其传递到父 div 以更改每张幻灯片的滑块周围区域的背景颜色。

滑块的输出是这样的：

<div class="cycle-slideshow" data-cycle-fx="fade" data-cycle-timeout="0" data-cycle-slides="div" data-cycle-prev="#previous" data-cycle-next="#next" data-cycle-swipe="true" data-cycle-pager="#no-template-pager" data-cycle-pager-template="" style="position: relative;">
<div class="cycle-sentinel cycle-slide" style="position: static; top: 0px; left: 0px; z-index: 100; opacity: 1; visibility: hidden; display: block;">
    <a href="#"><img style="background-color: #ff0000;" src="http://cambelt.co/1070x400/Rotator1?color=cccccc,ffffff" alt="fsadfsdfas"></a>
</div>
<div class="slide cycle-slide cycle-slide-active" style="position: absolute; top: 0px; left: 0px; z-index: 100; opacity: 1;">
    <a href="#"><img style="background-color: #ff0000;" src="http://cambelt.co/1070x400/Rotator1?color=cccccc,ffffff" alt="fsadfsdfas"></a>
</div>
<div class="slide cycle-slide" style="position: absolute; top: 0px; left: 0px; z-index: 99; display: none;">
    <a href="#"><img src="http://cambelt.co/1070x400/Rotator2?color=cccccc,ffffff" alt=""></a>
</div>
<div class="slide cycle-slide" style="position: absolute; top: 0px; left: 0px; z-index: 97; display: none;">
    <a href="#"><img src="http://cambelt.co/1070x400/Rotator3?color=cccccc,ffffff" alt=""></a></div>
<div class="slide cycle-slide" style="position: absolute; top: 0px; left: 0px; z-index: 96; display: none;"><a href="#"><img src="http://cambelt.co/1070x400/Rotator4?color=cccccc,ffffff" alt=""></a>
</div>
</div>

我的父 div 位于滑块 (.home-rotator-wrap) 上方并跨越窗口的宽度。到目前为止，我有这个，但我很确定我已经很远了。

$('.home-rotator-wrap > .cycle-slide-active > img').cycle(function() {
    var slideBG = $(this).attr('style');
    $('.home-rotator-wrap').attr('style', slideBG);
});

【问题讨论】：

只是想知道您是否找到了解决方案？我有一个类似的问题，我认为我可以适应我需要的工作（根据你想要的）。

标签： jquery background styles cycle attr

【解决方案1】：

首先，您需要将 'data-cycle-timeout' 设置为 0 以外的值，图像根本不显示。代码如下：

$('.cycle-slideshow').on('cycle-before', function (event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
    var bg = $(incomingSlideEl).find('img').css('backgroundColor'); // get background style from each image
    $('body').css('background', bg); // set background color from var
});

Demo, JSFiddle

【讨论】：