定义功能的jQuery插件使用

Question

我有以下的标记（Plunker Example）：

<div class="slides">  
    <div class="slide" id="slide-01"> 
    <img src="" 
    </div> 
    <div class="slide" id="slide-02"> 
    Slide 02 Content 
    </div> 
    <ul class="navigation"> 
    <li><a href="#slide-01"></a></li> 
    <li><a href="#slide-02"></a></li> 
    </ul>  
</div> 

我创建一个简单的滑块插件：

$("div.slides").slider(); 

这将工作如下：

1. 添加“主动”类第一滑动和在导航第一锚;

2. 8秒钟后改变活性类下一幻灯片和下锚定件; 所以在这种情况下，我想显示下一张幻灯片并隐藏前一张幻灯片。

3. 如果锚定被点击导航表示滑动，其id是一样的，在锚减去＃的HREF值。

基本上就是它了......所以，我试过如下：

$(function() { 

    $("div.slides").slider(); 

}); 

(function ($) { 

    $.fn.slider = function (options) { 

    var defaults = { 
     delay: 800, 
     speed: 200 
    }; 

    var options = $.extend({}, defaults, options); 

    $(this).each(function() { 

     var $this = $(this); 

     var $items = $this.children("div.slide"); 

     var $pages = $this.children("ul.pager li a"); 

     $items.first().addClass("active"); 

     $pages.first().addClass("active"); 

     var timer; 

     start(); 

     $pages.on("click", function (e) {   

     e.preventDefault(); 

     console.log("here"); 

     show(this.attr("href").replace("#", ""));   

     });  

     var start = function start() { 
     timer = setTimeout(next, 8000); 
     }; 

     var stop = function stop() { 
     clearTimeout(timer); 
     };  

     var next = function next() { 
     var item = $items.find(".active").next();   
     if (!item.length) 
      item = $items.find(".active").first(); 
     show(item.attr("id")); 
     }; 

     var show = function show(id) { 

     if ("#" + id == $this.children("ul.pager li a.active").attr("href")) 
      return; 

     clearTimeout(timer); 

     $items.removeClass("active").hide(); 

     $items.find("#id").first().addClass("active").fadeIn("slow"); 

     $pages.removeClass("active"); 

     $pages.find("a[href*=" + id + "]").first().addClass("active"); 

     start(); 

     }; // show 

    }); 

    return this; 

    }; 

})(jQuery); 

我有一些问题，使这项工作。一个是我的错误：

jQuery.Deferred exception: start is not a function $.fn.slider 

这发生在我所有的功能...

Answer 1

你的问题是：

start(); 

    // ...  

    var start = function start() { 
    timer = setTimeout(next, 8000); 
    }; 

您start()试图访问变量var start这是undefined（变量start隐藏了指定的函数start）。或者移动start，或者在函数前面删除var start =。因为然后命名的函数start将被访问，因为它被提升到范围的开始处。

start(); 

    // ...  

    function start() { 
    timer = setTimeout(next, 8000); 
    }; 

你需要使用你所使用的所有功能来做到这一点var name = function name()。

Answer 2

在JS行32中，start（）函数在被定义之前被调用。删除它并在函数定义下面调用它。