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

发布于 2024-08-29 09:05:19 字数 1168 浏览 7 评论 0原文

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

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

我怎样才能结合我的两个功能来做到这一点？

// 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>

原文

I am using jQuery cycle in several galleries with #next #prev navigation and a image counter output.

Now I am trying to connect all these galleries together. If the user reaches the final slide of gallery A (galleryA.html), the #next anchor should point to gallery B (galleryB.html) / the #prev anchor should point to gallery C (galleryC.html).

How can I combine my 2 functions to do that?

// 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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

生生漫 2024-09-05 09:05:19

对cycle插件不太熟悉，但是你可以在function onAfter中放置类似的东西：

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

或者你可以尝试

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

Untested，类似的东西？

基本上，它仅在显示最后一张幻灯片后将重定向行为附加到 #next 上。可能有一个 onFinish 选项或其他选项，您检查过文档吗？

Not too familiar with the cycle plugin, but you could put something like this in function onAfter:

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

or you could try

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

Untested, something along those lines?

Basically it only attaches the redirect behaviour onto #next after the last slide has been shown.. There might be an onFinish option or something, have you checked the docs?

回复收藏 0 原文