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

Question

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

基本上，随着幻灯片的变化，通过使用data-main-color属性，h1的颜色也会变化。

我正在使用“ 最大”滑块。

我知道我没有尝试触发某个事件的更改，这是我的知识所无法触及的……所以任何帮助都将是很大的。

我的密码

HTML：

        <div id="maximage">
            <div>
                <img src="images/homepage_1.jpg" alt="" />
                <div class="in-slide-content" data-main-color="#000"></div>
            </div>
            <div>
                <img src="images/homepage_2.jpg" alt="" />
                <div class="in-slide-content" data-main-color="#FFF"></div>
            </div>
            <div>
                <img src="images/homepage_3.jpg" alt="" />
                <div class="in-slide-content" data-main-color="#000"></div>
            </div>
            <div>
                <img src="images/homepage_4.jpg" alt="" />
                <div class="in-slide-content" data-main-color="#FFF"></div>
            </div>
            <div>
                <img src="images/homepage_4.jpg" alt="" />
                <div class="in-slide-content" data-main-color="#000"></div>
            </div>
        </div>

一旦Maximage完成其任务：

<div id="maximage" class="mc-cycle">

    <div class="mc-image" style="background-image: url(http://box.dev/box-v1.0/images/homepage_1.jpg);">
        <div class="in-slide-content" data-main-color="#000"></div>
    </div>

    <div class="mc-image" style="background-image: url(http://box.dev/box-v1.0/images/homepage_2.jpg);">
        <div class="in-slide-content" data-main-color="#FFF"></div>
    </div>

    <div class="mc-image" style="background-image: url(http://box.dev/box-v1.0/images/homepage_3.jpg);">
        <div class="in-slide-content" data-main-color="#000"></div>
    </div>

    <div class="mc-image" style="background-image: url(http://box.dev/box-v1.0/images/homepage_4.jpg);">
        <div class="in-slide-content" data-main-color="#FFF"></div>
    </div>

    <div class="mc-image" style="background-image: url(http://box.dev/box-v1.0/images/homepage_5.jpg);">
        <div class="in-slide-content" data-main-color="#000"></div>
    </div>

</div>

JS：

(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));

Answer 1

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

首先使用当前对象找到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');

        });

Answer 2

解决了：

 (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));