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

Posted 2023-02-26

【中文标题】同一页面上多个 Jquery 循环实例的多个寻呼机？

【英文标题】：Multiple Pagers for Multiple Jquery Cycle Instances on same page?

【发布时间】：2010-05-17 18:59:11

【问题描述】：

我试图弄清楚如何让多个寻呼机与多个 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"    />
                  <img src="project-slides/challengefactor-2.jpg"    />
                  <img src="project-slides/challengefactor-3.jpg"    />
                  <img src="project-slides/challengefactor-4.jpg"    />
                </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。

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

【参考方案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)
    );    
);

【参考方案2】：

感谢您的代码。我找到了类似的代码，

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

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

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

【讨论】：

我也将它用于上一个和下一个控制。效果很好！谢谢！