Question

Hi Stack Overflow偷看，

我没有这方面的工作代码，因为我不确定从哪里开始。所以请提前道歉。

我已经在互联网上寻找解决方案，但这感觉它可能非常简单（而且我过于复杂化）或者它有些专业化。

现状：我使用Cycle2作为我选择的滑块（并且更愿意坚持下去 - 很难让我使用另一个滑块，TBH）。每张幻灯片都有一个特定的“颜色”类，以及一个“幻灯片”类

我需要什么：我需要根据活动类的颜色更改<body>上的类。

思想：所以我还没有关于颜色类的命名约定，但我的想法是它可能是.col-[name] [name] 是黄色，红色等等。所以当滑块的活动类是 col-yellow ，它将此类添加到<body>，因此我可以向主体添加背景颜色/图像（无论我想要的CSS）。 / p>

然后，一旦活动幻灯片发生变化，如果碰巧将其体型更改为 col-red ，则<body>匹配。

我希望这是有道理的，而Stack Overflow中一些非常棒的人可以帮助我。

感谢您花时间阅读本文！

Answer 1

我很久以前就回答了类似的问题。

DEMO http://jsfiddle.net/kevinPHPkevin/7VzaQ/3/

$('.cycle-slideshow').on('cycle-before', function (event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
var bg = $(incomingSlideEl).find('img').css('backgroundColor');
$('body').css('background', bg);
});

希望这有帮助

[编辑]我编辑了代码，现在它将同一个类分配给分配给活动幻灯片的正文

DEMO http://jsfiddle.net/kevinPHPkevin/7VzaQ/4/

只是为了解释我的所作所为 - 正如您在上面的代码中所看到的，我创建了一个名为var的{{1}}。此bg是活动幻灯片的CSS背景颜色。然后我将var分配给body标签的背景。按照您的要求，您需要更改课程，而不仅仅是样式更改。鉴于此，我只是更改了代码，以便找到var attr而不是CSS背景颜色。

之前的

Var片段：

class

以后的Var片段：

var bg = $(incomingSlideEl).find('img').css('backgroundColor');
    $('body').css('background', bg);

使用Cycle2基于活动幻灯片切换正文类

1 个答案: