如何更改控件nav flexslider中的活动图像？

Question

我想改变控制导航图像，它应该有不同的外观，所以你可以看到它属于幻灯片图像。我的JavaScript文件

$(window).load(function() { 
    $('#main-slider').flexslider({ 
     animation: "fade", 
     controlNav: false, 
     directionNav: false, 
     keyboard: false, 
     controlsContainer: ".flex-container", 
     start: function(slider) { 
     $('a.slide_thumb').click(function() { 
      $('.flexslider').show(); 
      var slideTo = $(this).attr("rel")//Grab rel value from link; 
      var slideToInt = parseInt(slideTo)//Make sure that this value is an integer; 
      if (slider.currentSlide != slideToInt) { 
       slider.flexAnimate(slideToInt)//move the slider to the correct slide (Unless the slider is also already showing the slide we want); 
       } 
     }); 
     } 
    }); 
    $('#secondary-slider').flexslider({ 
     animation: "fade", 
     controlNav: false, 
     directionNav: false, 
     keyboard: false, 
     controlsContainer: ".flex-container", 
     start: function(slider) { 
     $('a.slide_thumb').click(function() { 
      $('.flexslider').show(); 
      var slideTo = $(this).attr("rel")//Grab rel value from link; 
      var slideToInt = parseInt(slideTo)//Make sure that this value is an integer; 
      if (slider.currentSlide != slideToInt) { 
       slider.flexAnimate(slideToInt)//move the slider to the correct slide (Unless the slider is also already showing the slide we want); 
      } 
     }); 
     } 
    }); 
}); 

然后滑动激活我会变成onlineikon2.png，animal2.png，brand2.png等 我怎么能这样做？

<div id="main-slider" class="flexslider"> 
<ul class="slides"> 
    <li class="ms1"> 
     <img src="http://in.byrantest.se/wp-content/themes/Krismas/images/slides/startsidebild1.jpg" 
     width="495" height="325" /> 
    </li> 
    <li class="ms2"> 
     <img src="http://in.byrantest.se/wp-content/themes/Krismas/images/slides/skadedjur.jpg" 
     width="495" height="325" /> 
    </li> 
    <li class="ms3"> 
     <img src="http://in.byrantest.se/wp-content/themes/Krismas/images/slides/brand.jpg" 
     width="495" height="325" /> 
    </li> 
    <li class="ms4"> 
     <img src="http://in.byrantest.se/wp-content/themes/Krismas/images/slides/utbildning.jpg" 
     width="495" height="325" /> 
    </li> 
    <li class="ms5"> 
     <img src="http://in.byrantest.se/wp-content/themes/Krismas/images/slides/online.jpg" 
     width="495" height="325" /> 
    </li> 
    <li class="ms6"> 
     <img src="http://in.byrantest.se/wp-content/themes/Krismas/images/slides/live.jpg" 
     width="495" height="325" /> 
    </li> 
</ul> 
</div> 
<div id="secondary-slider" class="flexslider"> 
<ul class="slides"> 
    <li class="ss1"> 
     <h2>Work</h2> 
     <p>Some text</p> 
    </li> 
    <li class="ss2"> 
     <h2>Animal</h2> 
     <p>Some text.</p> 
    </li> 
    <li class="ss3"> 
     <h2>Brand</h2> 
     <p>Some text.</p> 
    </li> 
    <li class="ss4"> 
     <h2>Education</h2> 
     <p>Some text.</p> 
    </li> 
    <li class="ss5"> 
     <h2>Online</h2> 
     <p>Some text.</p> 
    </li> 
    <li class="ss6"> 
     <h2>Live</h2> 
     <p>Some text.</p> 
    </li> 
</ul> 
</div> 
<div class="hogerruta"> 
<ul> 
    <li><a rel="0" class="slide_thumb" href="#"> 
     <img title="Work" 
     src="http://www.example.com/onlineikon1.png" alt="" /></a></li> 
    <li><a rel="1" class="slide_thumb" href="#"> 
     <img title="Animal" 
     src="http://www.example.com/animal1.png" alt="" /></a></li> 
    <li><a rel="2" class="slide_thumb" href="#"> 
     <img title="Brand" 
     src="http://www.example.com/brand1.png" alt="" /></a></li> 
    <li><a rel="3" class="slide_thumb" href="#"> 
     <img title="Education" 
     src="http://www.example.com/education1.png" alt="" /></a></li> 
    <li><a rel="4" class="slide_thumb" href="#"> 
     <img title="Online" 
     src="http://www.example.com/onlineikon1.png" alt="" /></a></li> 
    <li><a rel="5" class="slide_thumb" href="#"> 
     <img title="Live" 
     src="http://www.example.com/liveikon1.png" alt="" /></a></li> 
</ul> 
</div> 

Answer 1

您需要

<li data-thumb="http://URL_TO_THUMBNAIL">

添加到每个华里。缩略图也是您需要创建的不同图像。

希望这会有所帮助。