多个 jQuery 幻灯片的问题

Question

基本上我正在使用 jQuery Cycle 插件设置一个包含多个幻灯片的页面。每个幻灯片（'.slideshow'）都有自己的寻呼机（'.controls'）形式的导航。但是，每次我单击寻呼机图标时，页面上的所有幻灯片都会淡入下一张幻灯片。我怎样才能防止这种情况，以便只有有问题的幻灯片有转换。我以为我下面的代码可以工作，但事实并非如此，我如何显示选择了哪个寻呼机图标？

我的代码如下：

$(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 上设置测试 并将其链接到此处。