Jquery Cycle插件:多页计数器,在一页上显示多个幻灯片
我有一个页面计数器(1/9)系统,用于在一页上进行多个幻灯片放映。 我的问题是: 当我点击一个幻灯片时 它不仅影响这个页面的页面计数器 但是所有的页面都与该页面上的不同幻灯片相对应 如果有人能解决我的问题,我将不胜感激 这里是我的JQuery代码:Jquery Cycle插件:多页计数器,在一页上显示多个幻灯片,jquery,plugins,cycle,Jquery,Plugins,Cycle,我有一个页面计数器(1/9)系统,用于在一页上进行多个幻灯片放映。 我的问题是: 当我点击一个幻灯片时 它不仅影响这个页面的页面计数器 但是所有的页面都与该页面上的不同幻灯片相对应 如果有人能解决我的问题,我将不胜感激 这里是我的JQuery代码: <script type='text/javascript'> $(document).ready(function() { $('.slidecontein .slideshow').each(
<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>
但是仍然不起作用(它正在破坏幻灯片放映)您正在使用选择器“.slidecontein.slideshow”上的.each()方法,该方法不是唯一的,确保它将匹配多个元素。基本上,.cycle()方法代码一次控制多个幻灯片放映
最好为每个幻灯片放映容器分配一个ID,并分别对每个容器使用.cycle()方法。这样,它们都将被独立控制
<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')