在同一页上多个Jquery循环实例的多个寻呼机？

Question

我试图找出如何可以有多个分页器关联到多个jQuery循环幻灯片，都在同一页面上，而无需手动创建新的类和脚本来引用它们。

我的HTML看起来像这样。

<!-- PROJECT --> 
     <div title="Challenge Factor" class="project"> 

      <div class="projectinfo-top"> 
       <div class="project-title"><h2>Challenge Factor</h2></div> 
       <div class="bulletnav"></div> 
      </div> 

      <div class="minislideshow-bg"> 
       <div class="minislideshow"> 
        <img src="project-slides/challengefactor-1.jpg" width="729" height="425" alt="Challenge Factor" /> 
        <img src="project-slides/challengefactor-2.jpg" width="729" height="425" alt="Challenge Factor" /> 
        <img src="project-slides/challengefactor-3.jpg" width="729" height="425" alt="Challenge Factor" /> 
        <img src="project-slides/challengefactor-4.jpg" width="729" height="425" alt="Challenge Factor" /> 
       </div> 
      </div> 

      <div class="projectinfo-text"> 

       <p>ChallengeFactor.com is a new social network based on user created challenges that push members to better themselves and the lives around them. Webphibian was contacted to develop the social network from scratch and tie it into Challenge Factor's current branding. My role on this project was to design the social network side of the site, redesign their current site, and all front-end development.</p> 
      </div><!--/project info text--> 

     </div><!--/PROJECT--> 

我的jquery看起来像。

$(function() { $('.minislideshow').cycle({ timeout: 0, pager:'.bulletnav' }); }); 

我列出了多个项目，每个项目都有自己的幻灯片，div.minislideshow。我希望寻呼机链接进入每个项目实例的div.bulletnav。

任何帮助将不胜感激。如果您需要更多信息，请告诉我。谢谢。

Answer 1

我发现这真的很有帮助：

http://forum.jquery.com/topic/jquery-cycle-plugin-set-up-multiple-containers-with-same-options

基本上他们正在做的每一个幻灯片。每一个（），然后使parentNode进入相关链接，就像这样：

$('section.portfolioItem .image').each(function(){ 
    var p = this.parentNode; 
    $(this).cycle({ 
     timeout: 0, 
     prev: $('.prev', p), 
     next: $('.next', p), 
     pager: $('.slideshowNav', p) 
    });  
}); 

Answer 2

感谢您的代码。我发现了一个类似的代码，

$('.minislideshow').each(function() { 
    var $nav = $('<div class="pager"></div>').insertBefore(this); 

    $(this).cycle({ 
     timeout: 2000, 
     pager: $nav 
    }); 
}); 

这似乎是在做同样的事情。我现在的问题是，第一张幻灯片以外的幻灯片没有出现。传呼机图标显示代表每个div容器中幻灯片的数量，但我无法弄清楚如何让图像显示出来。他们似乎在第一个上工作得很好。我可以得到我期待的结果，如果我为幻灯片放映设置了多个div，并为每个幻灯片分配一个独特的类，然后为每个类创建JavaScript。上面的代码有助于我不必为每个实例手动创建一个新类，但是第一个旁边的其他容器中的幻灯片图像现在似乎并没有显示出来？