根据哪个滑块图像处于活动状态，更改徽标的颜色答案

【问题标题】：Change color of logo depending on which slider image is active根据哪个滑块图像处于活动状态，更改徽标的颜色
【发布时间】：2014-11-18 22:12:58
【问题描述】：

我正在使用带有许多明暗图像的 Revolution Slider。我的徽标图像出现在图像滑块的顶部。当滑块显示深色图像时，我希望我的徽标图像显示浅色版本；当滑块显示浅色图像时，我希望我的徽标变暗。

以下是实现此目标的两个网站示例，尽管我仍然不确定如何：

http://vankarwai.com/themes/lobo-agency/ http://pixelgrade.com/demos/pile/

您认为实现这一目标的最佳方法是什么？

谢谢！劳伦

【问题讨论】：

我尝试遵循 vivek 的解决方案，但文本并没有像应有的那样改变滚动条上的颜色。有任何想法吗？ jsfiddle.net/tvuppu4w/4

标签： jquery revolution-slider

【解决方案1】：

你可以使用这个插件：http://www.kennethcachia.com/background-check/index.html

代码示例：

BackgroundCheck.init({
  targets: '.check',
  images: '.images'
});

使徽标容器使用“检查”类，并使滑块图像使用“图像”类。该插件将检查带有“images”类的图像的亮度，并自动将“background--light”或“background--dark”类附加到带有“check”类的元素。

您可以像这样使用一些 css 来更改徽标图像：

.check.background--light {
  background: url(logo-black.png); 
}

.check.background--dark {
  background: url(logo-white.png);
}

【讨论】：

这看起来很棒！不过，我在实施它时遇到了一些麻烦……知道我做错了什么吗？ jsfiddle.net/tvuppu4w/4

【解决方案2】：

在每个 li 标签中添加属性 data-color（白色或黑色）

<li data-color="white" data-transition="fade" data-slotamount="5" data-masterspeed="700"   >

添加 onchange 事件

jQuery(document).ready(function() {

   revapi = jQuery('.tp-banner').revolution(
    {
        delay:9000,
        startwidth:1170,
        startheight:500,
        hideThumbs:10

    });


    revapi.bind("revolution.slide.onchange",function (e,data) {
        color=$(this).find('li').eq(data.slideIndex-1).data('color');

    if(color=='black') {// swap logo to black}
    if(color=='white') {// swap logo to white}

    });

【讨论】：