jQuery触发h1使用CSS和Maximage滑块颜色变化

Question

我试图根据当前活动幻灯片更改h1标记的颜色。

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

我正在使用Maximage滑块。

我明白，我没有试图触发事件的变化，这是我的知识已经打到了墙上......所以任何帮助都会很棒。

我的代码

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

解决：

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

Answer 2

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

首先找到currentimage使用当前对象，并使用该对象次使用`.bind（）申请的功能

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

     });