0

我正在使用 jQuery 图像库（在本例中为FlexSlider）在一个页面上呈现多个画廊。一次只能查看一个。为了适应这一点，我在单击缩略图后使用淡入/淡出。问题是画廊休息。我尝试了几个，它们以不同的方式破裂。我确信有一种方法可以“重置”插件以防止其损坏。这就是我正在做的事情，当在页面上显示多个滑块时，应该根据站点工作：

jQuery：

<script type="text/javascript" charset="utf-8">
      $(window).load(function() {

        $('#main-slider').flexslider({
        animation:'fade',
        directionNav:true,
        controlsContainer: ".flex-container"
        });

        $('#secondary-slider').flexslider({
        animation:'fade',
        directionNav:true,
        controlNav:true,
        controlsContainer: ".flex-container"
        });

      });

      $(function(){
        $('#main-slider,#secondary-slider').hide();

//1//       

  $('.gal_icon_1').click(function(){
        $('#secondary-slider').fadeOut(function(){
        $('#main-slider').fadeIn();
        });
  });

//2//

   $('.gal_icon_2').click(function(){
        $('#main-slider').fadeOut(function(){
        $('#secondary-slider').fadeIn();
        });
  });

    });
    </script>

html:

<div class="container">
    <div id="main-slider" class="flexslider">
        <ul class="slides">
            <li>
                <img src="images/BVL_CHANDRA-B_MM_2010_A3.jpg" />
            </li>
            <li>
                <img src="images/BVL_CHANDRA-BLUE_MM_2010_A3.jpg" />
            </li>
            <li>
                <img src="images/BVL_JEWELS_MM_2010_A3.jpg" />
            </li>
        </ul>
    </div>

至于简单地将一个滑块淡出并淡入另一个滑块。但是当我这样做时，它会变得不稳定。那么，再一次，有没有办法“重置”滑块以使其在每个 div 上工作？

4

1 回答 1

2

我相信问题在于您初始化滑块，然后隐藏它们。

插件代码启动并开始动画过程，然后尝试对隐藏的元素进行动画处理。这会导致 jQuery 崩溃。

从 GitHub ( https://github.com/woothemes/FlexSlider/ ) 下载最新代码，您的问题应该可以通过您当前的实现来解决。我最近添加了预防逻辑，以在滑块不可见时阻止滑块执行操作。

于 2012-04-11T05:33:01.637 回答