Javascript jQuery使用CSS和Maximage滑块触发h1颜色更改

我正在尝试根据当前活动幻灯片更改h1标记的颜色

基本上，随着幻灯片的变化，通过使用

数据主颜色

属性，h1的颜色也会发生变化

我用的是滑块

我知道我没有试图触发事件的变化，这是我的知识遇到障碍的地方。。。因此，任何帮助都将是巨大的

我的代码

HTML:

已解决：

 (function ($) {

        $('#maximage').maximage({
            cycleOptions: {
                pager: '#maximage',
                activePagerClass: 'active',
                fx:'scrollUp',
                easing: 'easeOutSine',
                speed: 1000,
                timeout: 6000,
                prev: '#arrow_left',
                next: '#arrow_right',
                after: onAfter
            },
            onFirstImageLoaded: function(){
                $('#loader').hide();
                $('#maximage').fadeIn('fast');
            }
        });

        function onAfter() { 
            var mainColor = $(".mc-image.active").find(".in-slide-content").data("main-color");

            $(".page-title > h1").css({
                color: mainColor
            });
        }

    }(jQuery));

首先使用当前对象查找currentimage，然后使用该对象并应用函数

$(function() {




            $('#maximage').maximage({

                cycleOptions: {

                    fx: 'fade',
                    speed: 6000, // Has to match the speed for CSS transitions in jQuery.maximage.css (lines 30 - 33)
                    timeout: 5000,
                    prev: '#arrow_left',
                    next: '#arrow_right',
                    pause: 0,
                    before: function(last, current) {

                        var myfont = $(current).find(".in-slide-content").data("main-color");
                        $("#about").css({
                        "color":myfont

                    });

                    $("#about>h1").css({
                        "color": myfont

                    });

                        if (!$.browser.msie) {
                            // Start HTML5 video when you arrive
                            if ($(current).find('video').length > 0) $(current).find('video')[0].play();
                        }
                    },
                    after: function(last, current) {

                        if (!$.browser.msie) {
                            // Pauses HTML5 video when you leave it
                            if ($(last).find('video').length > 0) $(last).find('video')[0].pause();
                        }
                    }
                },
                onFirstImageLoaded: function() {
                    jQuery('#cycle-loader').hide();
                    jQuery('#maximage').fadeIn('fast');
                }
            });

            // Helper function to Fill and Center the HTML5 Video
            jQuery('video,object').maximage('maxcover');

        });

避免使用

.bind（）

，因为它已被弃用，请改用

.on

。

(function ($) {

    $('#maximage').maximage({
        cycleOptions: {
            pager: '#maximage',
            activePagerClass: 'active',
            fx:'scrollUp',
            easing: 'easeOutSine',
            speed: 1000,
            timeout: 6000,
            prev: '#arrow_left',
            next: '#arrow_right'
        },
        onFirstImageLoaded: function(){
            $('#loader').hide();
            $('#maximage').fadeIn('fast');
        }
    });

    $(window).bind("load", function() {

        $(".mc-image").each(function () {

            var mainColor = $(".mc-image.active").find(".in-slide-content").data("main-color");

            $(".page-title > h1").css({
                color: mainColor
            });

        });
    });
}(jQuery));

 (function ($) {

        $('#maximage').maximage({
            cycleOptions: {
                pager: '#maximage',
                activePagerClass: 'active',
                fx:'scrollUp',
                easing: 'easeOutSine',
                speed: 1000,
                timeout: 6000,
                prev: '#arrow_left',
                next: '#arrow_right',
                after: onAfter
            },
            onFirstImageLoaded: function(){
                $('#loader').hide();
                $('#maximage').fadeIn('fast');
            }
        });

        function onAfter() { 
            var mainColor = $(".mc-image.active").find(".in-slide-content").data("main-color");

            $(".page-title > h1").css({
                color: mainColor
            });
        }

    }(jQuery));

   Thanku for your code my text get change by doing this.. 

$(function() {




            $('#maximage').maximage({

                cycleOptions: {

                    fx: 'fade',
                    speed: 6000, // Has to match the speed for CSS transitions in jQuery.maximage.css (lines 30 - 33)
                    timeout: 5000,
                    prev: '#arrow_left',
                    next: '#arrow_right',
                    pause: 0,
                    before: function(last, current) {

                        var myfont = $(current).find(".in-slide-content").data("main-color");
                        $("#about").css({
                        "color":myfont

                    });

                    $("#about>h1").css({
                        "color": myfont

                    });

                        if (!$.browser.msie) {
                            // Start HTML5 video when you arrive
                            if ($(current).find('video').length > 0) $(current).find('video')[0].play();
                        }
                    },
                    after: function(last, current) {

                        if (!$.browser.msie) {
                            // Pauses HTML5 video when you leave it
                            if ($(last).find('video').length > 0) $(last).find('video')[0].pause();
                        }
                    }
                },
                onFirstImageLoaded: function() {
                    jQuery('#cycle-loader').hide();
                    jQuery('#maximage').fadeIn('fast');
                }
            });

            // Helper function to Fill and Center the HTML5 Video
            jQuery('video,object').maximage('maxcover');

        });