同一页面上多个 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)
    });    
});

Answer 2

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

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

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

它似乎在做同样的事情。我现在的问题是幻灯片中除第一张之外的图像不显示。显示的寻呼机图标代表每个 div 容器中幻灯片的数量，但我不知道如何显示图像。他们在第一天似乎工作得很好。如果我为幻灯片放映设置多个 div 并为每个 div 指定一个唯一的类，然后为每个类创建 JavaScript，我就可以获得我正在寻找的结果。上面的代码有所帮助，因此我不必为每个实例手动创建一个新类，但第一个容器旁边的其他容器中的幻灯片图像现在似乎没有显示？