Jquery Cycle 插件：一个页面上有多个幻灯片的多个寻呼机计数器答案

【问题标题】：Jquery Cycle plugin: multiple pager counter with multiple slideshow on one pageJquery Cycle 插件：一个页面上有多个幻灯片的多个寻呼机计数器
【发布时间】：2012-11-01 15:08:42
【问题描述】：

我有一个页面计数器 - 带有 (1/9) 系统 - 用于一页上的多个幻灯片。我的问题是：当我点击一张幻灯片时它不仅影响这个页面的计数器但是该页面上存在的不同幻灯片的所有页面计数器...

如果有人能解决我的问题，我将不胜感激。

这是我的 JQuery 代码：

<script type='text/javascript'>

        $(document).ready(function() {
            $('.slidecontein .slideshow').each(function(){
                $(this).cycle({
                    speed:1, 
                    timeout: 0,
                    next: $('.slideright', $(this).parent()),
                    prev: $('.slideleft', $(this).parent()),
                    after: function onAfter(curr,next,opts) {
                        var caption = (opts.currSlide + 1) + ' / ' + opts.slideCount;
                        $('.counter').html(caption);
                    }
                });
            });
        });
    </script>

这里是我的 html 代码示例

<div class="slidecontein"> 
 <div class="slideleft"> </div>
 <div class="slideright"> </div>

 <div class="slideshow"> 
 <div class="slide1">
 <img src="../imgs/01.jpg">
 </div>

  <div class="slide2">
 <img src="../imgs/02.jpg"> 
 </div>

 <div class="slide3">
 <img src="../imgs/03.jpg">
 </div>

    </div> <!-- END slideshow -->

       <div id="counter"></div>     <!-- my pages-counter -->

</div><!-- END slidecontein -->


<div class="slidecontein"> 
 <div class="slideleft"> </div>
 <div class="slideright"> </div>

 <div class="slideshow"> 

<div class="slide1">
 <img src="../imgs/10.jpg">
 </div>

  <div class="slide2">
 <img src="../imgs/11.jpg"> 
 </div>


 </div> <!-- END slideshow -->
 <div id="counter"></div>            <!-- my page counter -->
 </div><!-- END slidecontein -->

我也试过这个：

var ss=$(this).closest('.slidecontein')

但仍然无法正常工作（它正在破坏幻灯片）

【问题讨论】：

标签： jquery plugins cycle

【解决方案1】：

您在选择器 '.slidecontein .slideshow' 上使用 .each() 方法，该方法不是唯一的，以确保这将匹配多个元素。基本上，您的 .cycle() 方法代码一次控制多个幻灯片。

您最好为每个幻灯片容器分配一个 ID，并在每个幻灯片容器上单独使用 .cycle() 方法。这样他们都将被独立控制。

【讨论】：