jQuery Cycle goto 选项答案

【问题标题】：jQuery Cycle goto optionjQuery Cycle goto 选项
【发布时间】：2014-01-20 10:18:56
【问题描述】：

我的 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

我没有发现我的问题。

如何添加可点击的按钮？

【问题讨论】：

标签： javascript jquery cycle jquery-cycle

【解决方案1】：

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

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,
   ......

【讨论】：