我有一个页面计数器 - 带(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')
但仍无效(正在打破幻灯片)
答案 0 :(得分:0)
您正在选择器'.slidecontein .slideshow'上使用.each()方法,它不是唯一的,确保它将匹配多个元素。基本上,.cycle()方法代码一次控制多个幻灯片。
最好为每个幻灯片容器分配一个ID,并在每个容器上单独使用.cycle()方法。这样他们都将被独立控制。