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

Question

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

$('.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/

查询：

$(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')
    });


}



}); 

PS -> $(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')
    });

}); 


});