我试图找出我如何可以有多个寻呼机有关的多个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为每个项目实例。

任何帮助,将不胜感激。如果你需要更多的信息,让我知道。谢谢。

有帮助吗?

解决方案

我发现这个真的很有帮助:

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)
    });    
});

其他提示

谢谢你的代码。我发现了一个类似的代码时,

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

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

这似乎是做同样的事情。我的问题是,现在图像在滑梯其它比第一个显示不出来.寻呼机的图标显示代表人数的幻灯片每div容器,但我不能找出如何获得的图像来显示出来。他们似乎在第1次一个。我可以得到的结果是我要找的,如果我设定了多部幻灯片,并给每个人一个独特的一类,然后创建JavaScript对每一类。代码以上的帮助,所以我不必手动创建一个新的类对于各个实例中,尚未幻灯片图像在其他集装箱旁边的第一个似乎没有显示出来吗?

许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top