jQuery Cycle goto选项

时间:2014-01-20 10:18:56

标签: javascript jquery cycle jquery-cycle

我的Js:

   $("#front_events").cycle({
       fx:      'scrollHorz',
       next:   '.next',
       prev: '.prev',
       speed:500,
       timeout: 0,
       before:function(isNext, zeroBasedSlideIndex, slideElement){
           var c_list = '';
           for(i=1;i<=$("#front_events li").length;i++){
               c_list += '<li><a href="#" rel="'+ i +'">'+ i +'</a></li>';
           }
           $("#event_numbers").html(c_list);
           if(slideElement.currSlide == 0){
            $("div.day_calendar div.day_select_wrapper ul li a:eq(0)").addClass('active');
           }
       },
       after:function(isNext, zeroBasedSlideIndex, slideElement){
           var index = slideElement.currSlide + 1;
           var tarih = $(this).find('a.day_location').attr('rel');

           $("div.day_calendar div.day_select_wrapper ul li a").each(function(){
              if($(this).attr('rel') == index){
                  $(this).addClass('active');
              }else{
                  $(this).removeClass('active');
              }
           });
           tarih = tarih.split("|");
           var t_html = '<div class="day">' + tarih[0] + '</div><div class="month">'+ tarih[1] +'</div><div class="dayname">'+ tarih[2] +'</div>';
           $("#calendar_date").html(t_html);
       }

   });

它很棒。但是我想,当我点击a标签时,转到该图像。我找到了这个页面:

JQUERY CYCLE GOTO2

并更新了我的代码:

var bc = $('#event_numbers');

并补充道:

    $container.children().each(function(i) { 
        // create input 
        $('<li><a href="#" rel="'+ i +'">'+ i +'</a></li>') 
            // append it to button container 
            .appendTo(bc) 
            // bind click handler 
            .click(function() { 
                // cycle to the corresponding slide 
                $container.cycle(i); 
                return false; 
            }); 
    }); 

但是我的导航按钮崩溃了。当我通过DevTools检查时,出现此错误:

$container is not defined 

我没有发现我的问题。

如何添加可点击的按钮?

1 个答案:

答案 0 :(得分:0)

从您指定的链接中,我可以看到唯一的区别是您错过了将变量中的循环对象返回值保存,如:

var $container = $('#container').cycle({ 
    fx:     'scrollHorz', 
    speed:   300, 
    timeout: 0 
}); 

您的代码应为:

var $container = $("#front_events").cycle({
   fx:      'scrollHorz',
   next:   '.next',
   prev: '.prev',
   speed:500,
   timeout: 0,
   ......