多个jQuery幻灯片的问题

Question

基本上我使用jQuery Cycle插件创建了多页幻灯片的页面。每个幻灯片（'。幻灯片'）都有自己的导航形式（'。controls'）。然而，每当我点击一个传呼机图标时，所有的幻灯片都会显示在下一张幻灯片上。我该如何防止这种情况，以便只有幻灯片有问题transisiton.I以为我的代码下面的工作，但它不是，以及如何显示哪个传呼机图标被选中？

我的代码如下：

$(document).ready(function(){ 
$('.slideshow').each(function(){ 
var $this = $(this), $ss = $this.closest('.slideshow'); 
var pager = $ss.find('.controls'); 

$this.cycle({ 
fx:  'fade', 
speed: 'slow', 
timeout: 5000, 
pager: pager, 
pagerAnchorBuilder: function(idx, slide) { 
// return sel string for existing anchor 
return '.controls li:eq(' + (idx) + ') a'; 
} 
}); 

}); 
}); 

的HTML看起来是这样，但与页面上的倍数：

<div class="slider"> 
<div class="slideshow"> 
<a href="#" class="slider-item"><img src="img/temp-featuredwork.png" alt="icon" width="545" height="254" border="0" /></a> 
<a href="#" class="slider-item"><img src="img/temp-featuredwork.png" alt="icon" width="545" height="254" border="0" /></a> 
<a href="#" class="slider-item"><img src="img/temp-featuredwork.png" alt="icon" width="545" height="254" border="0" /></a> 
    <a href="#" class="slider-item"><img src="img/temp-featuredwork.png" alt="icon" width="545" height="254" border="0" /></a> 
</div> 
    </div> 
    <!--/slider--> 
    <ul class="controls"> 
     <li><a href="#">1</a></li> 
     <li><a href="#">2</a></li> 
     <li><a href="#">3</a></li> 
     <li><a href="#">4</a></li> 
    </ul> 

Answer 1

这部分似乎很奇怪：

$('.slideshow').each(function(){ 
    var $this = $(this), $ss = $this.closest('.slideshow'); 
    var pager = $ss.find('.controls'); 

尝试

$('.slideshow').each(function(){ 
var $this = $(this); 
var pager = $this.find('.controls'); 

您已经获得了在$ this中匹配的.slideshow元素的引用，所以您不需要ss。

如果这不起作用，请发布您的HTML片段，或者更好，请在http://jsfiddle.net上设置测试并将其链接到此处。