1

我正在尝试更改控件导航图像，它应该具有不同的外观，以便您可以看到它属于幻灯片图像。我的 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>
4

1 回答 1

0

您需要添加

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

到每一里。此外，缩略图是您需要创建的不同图像。

希望这可以帮助。

于 2013-06-15T00:49:16.003 回答