Question

我使用的是jquery FlexSlider，以下是我的代码

<link rel="stylesheet" type="text/css" href="css/gallery/shCore.css" />
<link rel="stylesheet" type="text/css" href="css/gallery/shThemeDefault.css" />
<link rel="stylesheet" type="text/css" href="css/gallery/flexslider.css" />

<script type="text/javascript" src="js/gallery/modernizr.js"></script>
<script type="text/javascript" src="js/gallery/jquery.flexslider.js" ></script>
<script type="text/javascript" src="js/gallery/shCore.js"></script> 
<script type="text/javascript" src="js/gallery/shBrushXml.js"></script>
<script type="text/javascript" src="js/gallery/shBrushJScript.js"></script>

<script type="text/javascript" src="js/gallery/jquery.easing.js"></script>
<script type="text/javascript" src="js/gallery/jquery.mousewheel.js"></script>

以下是身体

<body>
<div id="slider" class="flexslider">
                      <ul class="slides">
                             <li >
                              <img src="images/gallery/1.jpg" alt="image01" data-description="Fiesta Gallery" height="299px" width="450px" /> 
                            </li>
                            <li >
                              <img src="images/gallery/2.jpg" alt="image01" data-description="Fiesta Gallery" height="299px" width="450px"/> 
                            </li>
                            <li >
                              <img src="images/gallery/3.jpg" alt="image01" data-description="Fiesta Gallery" height="299px" width="450px" /> 
                            </li>
                            <li >
                              <img src="images/gallery/4.jpg" alt="image01" data-description="Fiesta Gallery" height="299px" width="450px" /> 
                            </li>   
                            <li >
                              <img src="images/gallery/5.jpg" alt="image01" data-description="Fiesta Gallery" height="299px" width="450px" /> 
                            </li>
                            <li >
                              <img src="images/gallery/6.jpg" alt="image93" data-description="Fiesta Gallery" height="299px" width="450px" />
                            </li>
                            <li >
                              <img src="images/gallery/7.jpg" alt="image97" data-description="Fiesta Gallery" height="299px" width="450px" />
                            </li>
                            <li >
                              <img src="images/gallery/8.jpg" alt="image108" data-description="Fiesta Gallery" height="299px" width="450px" />
                            </li>
</ul>
                    </div>
                    <div id="carousel" class="flexslider" style="margin-top:-50px;">
                      <ul class="slides">
                            <li >
                              <img src="images/gallery/thumbs/1.jpg" height="100px"  /> 
                            </li>
                            <li >
                              <img src="images/gallery/thumbs/2.jpg" height="100px" /> 
                            </li>
                            <li >
                              <img src="images/gallery/thumbs/3.jpg" height="100px" /> 
                            </li>
                            <li >
                              <img src="images/gallery/thumbs/4.jpg" height="100px" /> 
                            </li>       
                            <li >
                              <img src="images/gallery/thumbs/5.jpg"  height="100px" /> 
                            </li>
                            <li >
                              <img src="images/gallery/thumbs/6.jpg" height="100px" />
                            </li>
                            <li >
                              <img src="images/gallery/thumbs/7.jpg" height="100px" />
                            </li>
                            <li >
                              <img src="images/gallery/thumbs/8.jpg" height="100px" />
                            </li>
</ul>
                    </div>
</body>

以下是头部

中的配置

$(function(){
      SyntaxHighlighter.all();
    });
    $(window).load(function() {
      // The slider being synced must be initialized first
      $('#carousel').flexslider({
        animation: "slide",
        controlNav: false,
        animationLoop: true,
        directionNav: false,
        slideshow: false,       
        slideshowSpeed: 7500,
        animationSpeed: 400,   
        itemWidth: 150,
        itemMargin: 5,
        startAt: 0, 
        move : 3,             
        asNavFor: '#slider'

      });

      $('#slider').flexslider({
        animation: "slide",
        controlNav: false,
        animationLoop: true,
        slideshowSpeed: 7500,
        animationSpeed: 400,
        pauseOnAction: false,
        slideshow: true,
        startAt: 0, 
        sync: "#carousel",
        start: function(slider) {
        $('#carousel .slides li img').click(function(event){
            event.preventDefault();
            //slider.flexAnimate(slider.getTarget("next"));
            var count = slider.currentSlide + 1;
            slider.flexAnimate(count);
        });
        }
      });
    });

从上面的代码中，我可以进行自动滑动，左/右按钮导航，在某些页面中点击它可以正常工作。

但如果我点击当前缩略图后面的两个缩略图，它会停止自动滑动。

我该如何解决这个问题？任何帮助都会赞赏。

感谢adavnce !!

Answer 1

我用以下代码替换：它可以工作

start: function(slider) {
    $('#carousel .slides li img').click(function(event){
        $('#slider').flexslider("play");
    });
}

我可以从参考文献中找出： https://github.com/woothemes/FlexSlider/

Answer 2

这是HTML结构

             <div class="g-s-wrapper">

              <div class="flexslider">

                <ul class="slides">

                  <li data-thumb="assets/img/gallery-photo/1.jpg">
                    <img src="assets/img/gallery-photo/1.jpg" alt="">
                  </li>

                  <li data-thumb="assets/img/gallery-photo/2.jpg">
                    <img src="assets/img/gallery-photo/2.jpg" alt="">
                  </li>

                </ul> <!-- .slides -->

              </div>  <!-- .flexslider -->

            </div>  <!-- .gallery slider wrapper -->

当您调用flexslider函数时，请使用如下

    if ($('.g-s-wrapper').length > 0) {

    $(window).load(function () {
        $('.g-s-wrapper .flexslider').flexslider({
            slideshowSpeed: 2000,
            directionNav: false, 
            controlNav: true,
            start: function(){
                var slide_li = $('.g-s-wrapper ul.slides li').not('.clone');
                var control_li = $('.g-s-wrapper .flexslider .flex-control-nav li a');
                console.log(control_li);
                $.each(slide_li, function(index, el){
                    var img_src = $('<img src="" />').attr('src', $(el).attr('data-thumb'));
                                img_src.appendTo(control_li[index]);

                });                             
            }   
        });
    });

jQuery FlexSlider和轮播缩略图导航

2 个答案: