0

我正在使用带有分页功能的 jQuery Cycle 插件（大约在页面下方）。

目前，根据示例，我所有的分页看起来都像简单的 1、2、3、4 a 标签。但是，我想制作这些缩略图。

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

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

我的代码：

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

});
4

1 回答 1

1

很高兴终于看到其他人使用这个很棒的插件而不是 jCarusel！本演示中解释了您想要做什么。

代码或多或少是这样的：

$('#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。你没有说任何关于你的标记或缩略图是如何制作的，但这应该让你开始。

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

于 2013-05-28T00:58:51.517 回答