javascript - jQuery 使用 CSS 和 Maximage slider 触发 h1 颜色变化

Question

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

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

我正在使用 Maximage slider 。

我知道我没有尝试触发事件的更改，这是我的知识碰壁的地方......所以任何帮助都会很好。

我的代码

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.. 

首先使用当前对象找到当前图像并使用该对象并应用您的函数

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

        });