#037 – 颜色操作

当我们在弄乱首页滑块的 CMS 功能时，我们为每个首页滑块提供了一个颜色选择器自定义字段。这使我们能够在任何需要的地方访问该颜色。在模板中，我们将每个滑块包装在一个带有 <div> 的 data-* 属性中，我们通过 Advanced Custom Field 的 API 将颜色值放在那里。

<div class="rsContent" data-main-color="<?php the_field('color'); ?>">
  <a data-value="hi" class="rsImg" href="<?php echo $slideImage[url]; ?>"></a>
</div>

Royal Slider 也为我们提供了一个在滑块更改时触发的事件。所以现在我们可以根据需要获取该滑块的“当前活动”颜色。

slider.ev.on('rsAfterSlideChange', function(event) {

  var mainColor = $(".rsActiveSlide")
    .find(".rsContent")
    .data("main-color");

  // Do stuff with the color!

});

我们可以使用 jQuery 以任何我们想要的方式将该颜色应用于元素。我们更进一步，浅色/深色 该颜色，然后将其应用在周围。