具有定义的寻呼机链接的jQuery周期

Question

我使用cycle构建了一个播放器，可以循环浏览各种促销活动，但我希望为每个页面定义特定的描述性分页链接(不包括1、2、3等)。我知道这应该是可能的，但我不知道如何……即使我在pager div中添加了元素，它们也会显示出来，但是自动生成的数字才是控制播放器的因素。提前感谢您的帮助！

$(document).ready( function(){
  $('#promoPlayer').cycle({
    fx: 'fade',
    speed: 600,
    timeout: 6000,
    delay: 1000,
    pager:'#pager'
  });
})

Answer 1

为此，您需要使用回调函数pagerAnchorBuilder来生成寻呼机链接。

你可以从函数中返回任何html字符串，它接收当前幻灯片作为第一个参数。从那里，您可以创建自己的结构。

$(document).ready( function(){
  $('#promoPlayer').cycle({
    fx: 'fade',
    speed: 600,
    timeout: 6000,
    delay: 1000,
    pager:'#pager',

    // callback fn that creates a thumbnail to use as pager anchor 
    pagerAnchorBuilder: function(idx, slide) { 
    return '<li><a href="#">my custom link #'+ idx +'</a></li>'; 
} 
  });
})

可以在http://jquery.malsup.com/cycle/pager2.html上看到现场演示