jQuery 循环:自定义回调?

发布于 2024-09-28 10:54:36 字数 384 浏览 4 评论 0原文

该片段运行我的幻灯片,其中包含一系列图像。在幻灯片的顶部我有“图像 x of y”。是否可以添加与每个上一个和下一个按钮相关的回调?一个回调会将 x 加 1,另一个回调会减 1。

所以这是某种形式的分页,我无法使用循环插件找到开箱即用的解决方案。

显然,我可以将自己的函数附加到 #prev 和 #next,但即使没有显示其他图像,计数仍然会增加。我需要能够检测图像是否被“滑入”查看。

$('#prod_list').cycle({ 
    fx:     'scrollHorz', 
    prev:   '#prev', 
    next:   '#next', 
    timeout: 0 ,
    nowrap: 1,          
});

This snippet runs my slideshow, which consists of a series of images. At the top of the slideshow I have "image x of y". Is it possible to add a callback that is tied to each the prev and next buttons? One callback would add 1 to the x and the other subtract.

So this is some form of pagination for which I could not find an out of the box solution with the cycle plugin.

I could obviously attach my own functions to #prev and #next but the count would still get incremented even if no other images are shown. I need to be able to detect whether or not images are being "slided" in to view.

$('#prod_list').cycle({ 
    fx:     'scrollHorz', 
    prev:   '#prev', 
    next:   '#next', 
    timeout: 0 ,
    nowrap: 1,          
});

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

扫码二维码加入Web技术交流群

发布评论

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

评论(2

々眼睛长脚气 2024-10-05 10:54:36

您不能使用 循环选项 中定义的 prevNextClick 选项吗?

这需要以下格式的函数:

function(isNext, zeroBasedSlideIndex, slideElement)

还有几个其他选项可以帮助分页。

  • pagerAnchorBuilderallowPagerClickBubble
  • pagerEvent
  • pagerClick
  • pager

Can't you use the prevNextClick option, as defined in the Cycle Options?

This takes a function in the following format:

function(isNext, zeroBasedSlideIndex, slideElement)

There are also several other options that can help with pagination.

  • pagerAnchorBuilder
  • allowPagerClickBubble
  • pagerEvent
  • pagerClick
  • pager
苏别ゝ 2024-10-05 10:54:36

http://jquery.malsup.com 查看回调下“onBefore”和“onAfter”的描述/cycle/int2.html。查看页面源代码,您会看到如何执行此操作的完整示例。

Checkout the description of "onBefore" and "onAfter" under Callbacks at http://jquery.malsup.com/cycle/int2.html. Viewing source of the page, you see the full example of how to do it.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文