Question

我正在试图弄清楚如何实现多个jQuery幻灯片（带有next和prev 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/

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


}



});

P.S。 - ＆GT; $（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')
    });

}); 


});

jQuery：带导航的多循环幻灯片

1 个答案: