在 jQuery 循环插件中使用多个寻呼机答案

【问题标题】：Using multiple pagers in jQuery cycle plugin在 jQuery 循环插件中使用多个寻呼机
【发布时间】：2009-11-02 21:55:39
【问题描述】：

是否可以使用 jQuery 的循环插件为幻灯片显示多个分页器元素？例如，在这个项目中，我需要在幻灯片的上方和下方都有一个寻呼机。下面的代码工作正常，但是当我尝试使用 jQuery 的 clone() 函数“克隆”导航（上一个、下一个和寻呼机）时，寻呼机将无法工作（尽管两组上一个和下一个链接都有效）。

var $pager = $('<span class="pager"></span>').prependTo("div.vg-nav"),
    $prev = $('<a href="" class="p">Previous</a>').prependTo("div.vg-nav"),
    $next = $('<a href="" class="n">Next</a>').prependTo("div.vg-nav");
$prev.add($next).wrapAll('<span class="nav"></span>');
$("div.vg-nav").clone().insertAfter("div.vg-items");

$("div.vg-items").cycle({
    prev:       $prev,
    next:       $next,
    pager:      $pager
});

上面的代码是一个精简的版本，以保持帖子的简短和重点！ :)

【问题讨论】：

标签： jquery jquery-plugins cycle

【解决方案1】：

Mike Alsup 推出了一个新版本 (2.73)，以支持幻灯片的多个寻呼机。然而，在我的示例中，它无法正常工作，可能是因为 prev/next/pager 项目被附加到标记并作为 JS 变量存储/引用。一旦我将代码更改为引用 prev/next/pager 类名（如下所示），而不是 JS 变量，它就起作用了！

$("div.vg-items").cycle({
    prev:       "a.p",
    next:       "a.n",
    pager:      "span.pager"
});

【讨论】：