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();

这将如下工作：

添加＆＃34;有效＆＃34;第一个滑动的类和导航中的第一个锚;
8秒后将活动课程更改为下一张幻灯片和下一个锚点; 因此，在这种情况下，我想显示下一张幻灯片并隐藏上一张幻灯片。
如果在导航栏中点击了一个锚点，则显示幻灯片的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（）函数在定义之前被调用。将其删除并在函数定义下面调用它。

定义JQuery插件使用的函数

2 个答案: