jQuery：带导航的多周期幻灯片

Question

我正在尝试弄清楚如何实现多个 jQuery 幻灯片（带有下一个和上一个导航），因为幻灯片将由客户端动态添加我使用过的类并试图实现它会找到下一个导航的实例并使用它来循环幻灯片：

$('.text-page-slideshow').each(function(){
var $this = $(this);
    $this.cycle({
        fx: 'fade',  
        speed: 400,     
        timeout: 0,
        next: $this.next('.nav-next'),
        prev: $this.next('.nav-prev')
    });    
}); 

这也是一个 jsfiddle 演示：http://jsfiddle.net/ncknm/2/
这可能只是我缺少的东西，但例如我试图找到.nav-next 的下一个实例以用作相关幻灯片的导航，但它似乎不起作用。任何建议将不胜感激。

Answer 1

您似乎必须为每个幻灯片容器提供唯一标识符，但这应该不是问题，因为页面是由服务器端脚本创建的（只需增加一个 var）

http://jsfiddle.net/ncknm/3/

JQuery:

$(document).ready(function() {



for(i=1;i<3;i++) { //you can easily get number from database, i hope

$('#slider'+i).cycle({
        fx: 'fade',  
        speed: 400,     
        timeout: 0,
        next: $('#slider'+i).next().children('.nav-next'),
       prev: $('#slider'+i).next().children('.nav-prev')
    });


}



}); 

附： -> 循环函数中的 $(this) 没有引用所需的 div……这是个问题。

如果您不想挖掘 wp 模板文件，请尝试此操作：

 jQuery.each($(".text-page-slideshow"), function(i) {

$(this).attr('id',"slider"+i);
$('#slider'+i).cycle({
        fx: 'fade',  
        speed: 400,     
        timeout: 0,
        next: $('#slider'+i).next().children('.nav-next'),
       prev: $('#slider'+i).next().children('.nav-prev')
    });

}); 


});