Question

我在#next #prev导航和图像计数器输出的几个画廊中使用jQuery循环。

现在我正在尝试将所有这些画廊连接在一起。如果用户到达图库A（galleryA.html）的最终幻灯片，则#next锚点应指向图库B（galleryB.html）/ #prev锚点应指向图库C（galleryC.html）。

如何将我的2个功能组合起来呢？

// slideshow fx
$(function() {
        $('#slideshow').cycle({ 
        fx:     'fade',
        speed:  350,        
        prev:   '#prev', 
        next:   '#next', 
        timeout: 0,
        after:     onAfter
    });
});
//image counter output
function onAfter(curr,next,opts) {
    var caption = 
        (opts.currSlide + 1) + opts.slideCount;
        $('#counter').html(caption);
}

HTML：

<div id="slideshow-container">

<div class="slideshow-nav"><a id="prev" href=""></a></div>
<div class="slideshow-nav"><a id="next" href=""></a></div>

<div id="slideshow" class="pics">
    <img src="galleryA/01.jpg" />
    <img src="galleryA/02.jpg" />
    <img src="galleryA/03.jpg" />
    <img src="galleryA/04.jpg" />
    <img src="galleryA/05.jpg" />
    <img src="galleryA/06.jpg" />
</div>
</div>

Answer 1

不太熟悉循环插件，但您可以在function onAfter中添加类似的内容：

if(opts.currSlide == opts.slideCount) { 
  $("#next").attr("href","galleryB.html"); 
}

或者你可以试试

if(opts.currSlide == opts.slideCount) { 
 $("#next").click(function() { document.location = "galleryB.html"; });
}

未经测试，这些是什么？

基本上它只会在显示最后一张幻灯片之后将重定向行为附加到#next上。可能有onFinish选项或其他内容，您是否检查了文档？

Answer 2

你可以看一下：

http://helpdesk.toitl.com/?p=cycle_plugin

在同一页面中集成2个同步循环并不容易......在此示例中，没有重新加载具有location = ...的页面，但是使用循环插件的不同命令管理2个库

此致 Dominique VINCENT

jQuery Cycle - #next #prev，在currentGallery的最终幻灯片后转到nextGallery

2 个答案: