Question

我正在使用jQuery Cycle插件并找到分页here（大约在页面的一半处）。

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

看起来nav div是由插件脚本本身创建的，所以如果我构建自己的缩略图列表并将它们指定为nav元素，插件只会将自己的分页附加到该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。你没有说你的标记或缩略图是如何制作的，但这应该让你开始。

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

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

1 个答案: