Javascript 反转fullpage.js中图像回调的颜色

我已经将幻灯片箭头更改为我自己的png，黑色箭头，但在一些背景较暗的幻灯片上，我想将它们反转为白色

-webkit-filter: invert(100%);

工作正常，但如何仅在使用回调的幻灯片上触发此操作

---

反转参数0%>100%的快速动画将是一个很酷的奖励。谢谢。

我不知道

fullPage.js

，但通过阅读，我发现您可以自定义在离开或进入幻灯片时触发的回调

我想这就是你想要的：

jsFiddle-

请注意，我只使用

-webkit filter

来反转颜色，因此这在其他非webkit浏览器中可能不起作用。比如，在Chrome中测试一下。否则，在添加/删除样式时，只需向过滤器属性添加更多前缀即可。这取决于您如何更改箭头，但是您可以，例如（使用fullPage.js），只更改边框颜色而不使用过滤器

基本上，我们使用afterSlideLoad和onSlideLeave回调来实现这一点。下面是注释中的解释代码。这很简单。我的评论比需要的代码要长得多，只是希望它是清楚的

示例HTML:

<div class="section">
    <div class="slide" data-anchor="slide1"> Slide 1 - Index 0 </div>
    <div class="slide" data-anchor="slide2"> Slide 2 - Index 1 </div>
    <div class="slide slide-dark" data-anchor="slide3"> Slide 3 - Index 2 <br> I'm black </div>
    <div class="slide" data-anchor="slide4"> Slide 4 - Index 3</div>
</div>

// Just take into consideration the callback methods.
// The body selector is the one I used in the jsFiddle, keep whatever you have.

$(document).ready(function() {
    $('body').fullpage({

        // The name is self explanatory. 
        // Fires when a a slide has finished loading
        // and returns info about the slide.
        // This is helpful so we can know when we are on the
        // darker slide(s)
        afterSlideLoad: function (anchorLink, index, slideAnchor, slideIndex) { 

            // Notice that in the HTML I set the data-anchor attribute, 
            // since that can help us be specific about what slide we are in. 
            // Otherwise, just use the index, which is probably a good idea 
            // since onSlideLeave doesn't return the slideAnchor parameter, 
            // for some reason.
            // Change the if statement to whatever fits your needs.
            // Check what index and/or anchor your darker slides are.

            if(slideAnchor === 'slide3' || slideIndex === 2) {

                // This adds the invert filter to the controlArrow(s),
                // effectively reversing their color WHEN inside of
                // this specific slide.
                // (In this example, slideIndex 2 with anchor 'slide3').
                $('.fp-controlArrow').css('-webkit-filter', 'invert(100%)');
            }
        },

        // This fires when leaving a slide.
        // This will be helpful to return the arrows to their 
        // default color. (When we know we've inverted them beforehand)
        onSlideLeave: function (anchorLink, index, slideIndex, direction) {

            // We inverted the color of the arrows in slide 3.
            // When leaving this slide, we roll them back to their
            // original color, by setting the filter to 'none'.
            // I don't know why this 'event' doesn't return the
            // slideAnchor parameter, so we will just use the index
            // in here, which is slideIndex === 2 for 'slide3'.
            // Again, change the if logic to fit your needs, i.e. add
            // more slides.

            if(slideIndex === 2) {

                // This removes the filter, arrows go back to their
                // original color.

                $('.fp-controlArrow').css('-webkit-filter', 'none');

            }
        }
    });
});

以及在过滤器上平滑过渡所需的CSS（将动画速度更改为您希望的任何速度）：

---

关于动画-你需要使用过渡：我不明白这个问题。你想只为带有特定ID的幻灯片触发新的css吗？这正是我需要的。非常感谢！没问题！很高兴它有用。

.fp-controlArrow {
    -webkit-transition: all 500ms;
    transition: all 500ms;
}