jQuery.cycle寻呼机分频器

时间:2012-05-05 11:03:00

标签: jquery cycle pager

这是我在这里的第一篇文章,我希望我不会犯很多错误......

我在我的网站上使用精彩的jquery.cycle插件作为新闻滑块模块。现在我想添加一个看起来像这样的寻呼机:

01/02 02/04

这意味着我必须在除了最后一个之后的每个寻呼机号码之后添加“分频器”(=“/”正斜杠)。但我无法弄清楚我怎么可能这样做。

这就是我所拥有的:

// redefine Cycle's updateActivePagerLink function 
$.fn.cycle.updateActivePagerLink = function(pager, currSlideIndex) {
    $(pager)
        .find('a')
        .removeClass('active') 
        .filter('a:eq('+currSlideIndex+')')
        .addClass('active'); 
};



$('div.teaser-news')
    .after('<div class="pager-news"></div>')
    .cycle({ 
        fx:     'scrollRight',
        rev:        1,
        speed:  'slow', 
        timeout: 6000,
        pager:'.pager-news', 
        pagerAnchorBuilder: function(idx, slide) {

            var numSlides = $("div.teaser-news").length;

            if( idx < 10){
                idx += '<a href="#">0' + idx + '</a><span class="divider">&nbsp;&#47;&nbsp;</span>';
            } else {
                idx += '<a href="#">' + idx + '</a><span class="divider">&nbsp;&#47;&nbsp;</span>';
            }

            return idx; 
        }
});

有人可以帮助我摆脱最后的斜线吗? 谢谢!

3 个答案:

答案 0 :(得分:0)

if( idx < 10){
   idx += '<a href="#">0' + idx + '</a>';
   if (idx+1 != numSlides) {
      idx += '<span class="divider">&nbsp;&#47;&nbsp;</span>';
   }
} else {
   idx += '<a href="#">' + idx + '</a>';
   if (idx+1 != numSlides) {
      idx += '<span class="divider">&nbsp;&#47;&nbsp;</span>';
   }
}

IMHO

答案 1 :(得分:0)

我更喜欢使用打击垫功能:

function zeroPad(num, places) {
  var zero = places - num.toString().length + 1;
  return Array(+(zero > 0 && zero)).join("0") + num;
}

然后你可以删除if / then然后执行:

var slash = "/";
if (idx=(numSlides-1))
    slash = "";

return zeroPad(idx+slash, 2); 

还有几个例子How to output integers with leading zeros in JavaScript

答案 2 :(得分:0)

由lucuma添加的零填充功能对我来说很方便,虽然经过一些实验后我发现输出不喜欢在包装外添加。因此,当我尝试return <a href='#'>" + zeroPad(n,2) + "</a>&nbsp;/&nbsp;时,它会在结束</a>

之后忽略标记

为了解决这个问题,我必须添加一个包装<li>,这样我就可以在包装器中添加正斜杠。我修改了我的代码以匹配

$('.carousel .images').cycle({
   timeout: 5000,
   pager : '.pager-news',
   pagerAnchorBuilder: function(idx, slide) {
     var n = idx+1;
     var wrapper = $("div.teaser-news");
     if(n != wrapper.children().length){
       return "<li><a href='#'>" + zeroPad(n,2) + "</a>&nbsp;/&nbsp;</li>";  
     }else{
       return "<li><a href='#'>" + zeroPad(n,2) + "</a></li>"; 
     }
   }
 });