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

Question

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

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

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

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

谢谢！劳伦

Answer 1

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

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

添加 onchange 事件

jQuery(文档).ready(函数() {

   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}

    });

Answer 2

你可以使用这个插件：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);
}