jQuery Cycle - 为寻呼机版本添加缩略图

Question

我正在使用jQuery Cycle插件和分页发现here（大约在页面中间的一半）。

目前，我所有的分页看起来像简单的1,2,3,4一个标签，根据示例。不过，我想改为制作这些缩略图。

它看起来像导航div是由插件脚本本身创建的，所以如果我建立自己的缩略图列表并将它们指定为导航元素，插件只会将自己的分页附加到该div。

有人会知道修改此插件允许图像缩略图的正确方法吗？

我的代码：

$('#frontimageswap') 
    .before('<div id="nav">') 
    .cycle({ 
    fx:  'turnDown', 
    speed: 'fast', 
    timeout: 5000, 
    pager: '#nav' 

}); 

Answer 1

大，终于看到别人使用这真棒插件而不是jCarusel！你想要做的是在这demo解释。

代码或多或少是这样的：

$('#slideshow').before('<ul id="nav">').cycle({ 
    fx:  'turnDown', 
    speed: 'fast', 
    timeout: 0, 
    pager: '#nav', 

    // callback fn that creates a thumbnail to use as pager anchor 
    pagerAnchorBuilder: function(idx, slide) { 
     return '<li><a href="#"><img src="' + slide.src + '" width="50" height="50" /></a></li>'; 
    } 
}); 

它使用的是在周期的每一项运行一次功能pageAnchorBuilder。在这里您可以访问当前的幻灯片和idx。你不是在说你的标记或缩略图是如何制作的，但这应该让你开始。

注意：我没有更改设置以匹配您的设置。