多个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

基本上他们为每个幻灯片放映一个.each(),然后将parentNode传递给相关链接,如下所示:

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