幻灯片 - 使用工作代码的jQuery插件失败

Question

我已经创建了一个幻灯片，其中包含jQuery文件夹中的图像以及stackoverflow和其他代码段的帮助。

图像命名为1.jpg，2.jpg ... 1-b.jpg，2-b.jpg ...特别的是，每个图像更改3个图像都被加载。第一次替换HTML中的图像（也是3个图像）。

3个新图像中的2个模糊，从当前到模糊电流的淡入淡出 - 下一个模糊 - 下一个。工作正常，看起来真的很棒。

现在我想制作一个真正的jQuery插件，因为我想在每个站点上更改启动（图像Nr。）和imageLast（这里回到启动）。好吧，我不知道创建插件的原始代码的逻辑是否存在问题。我的试验失败了。请看看。

原始工作代码：

 // slideshow ----------------------------------------------------------------------------
(function() {
var pauseTime = 7000;
function slideShow(index) {
    var imagePath = "slider-team";
    var startup = 1;
    var startindex = index+startup-1;
    var index1 = startindex+1;
    var lastImage = 6;         
    var fadeTime = 700;
    var fadeTime2 = 500;
    var fadeTime3 = 1000;
    var theImage1 = new Image();
    var theImage2 = new Image();
    var theImage3 = new Image();
    var url = imagePath + "/" + startindex + ".jpg";
    var urlb = imagePath + "/" + startindex + "-b.jpg";
    var url2b = imagePath + "/" + index1 + "-b.jpg";
        $(theImage1, theImage2, theImage3).load(function () {                   

                    $(theImage1).prependTo("#slider");
                    $(theImage2).prependTo("#slider");                      
                    $(theImage3).prependTo("#slider");

        $("#slider img:last").fadeOut(fadeTime, function() {
           $(this).remove();
           $("#slider img:last").fadeOut(fadeTime2, function() {
                $(this).remove();
                $("#slider img:last").fadeOut(fadeTime3, function() {
                        $(this).remove();
                        setTimeout(function() {
                                slideShow((index % (lastImage-startup)) + 1)
                                }, pauseTime);
            });
           }); 
           });
        });
        theImage1.src = url;
        theImage2.src = urlb;
        if(startup+index === lastImage) {
            theImage3.src = "slider/" + startup + "-b.jpg";
            } else {
            theImage3.src = url2b;
            };
     }
     $(document).ready(function() {
        // Img 1 is already showing, so we call 2
        setTimeout(function() { slideShow(2); }, pauseTime);
     });
  })();

尝试制作插件：

// slideshow ----------------------------------------------------------------------------
 (function($) {
    $.blurSlider = function(index, settings){
    var config = {
      'startup':1;
      'lastImage':17;
    };
    if(settings){$.extend(config, settings);}

    var pauseTime = 7000;
    //function slideShow(index) {
    var imagePath = "slider-opt";
    //var startup = 1;
    var startindex = index+startup-1;
    var index1 = startindex+1;
    //var lastImage = 17;         
    var fadeTime = 700;
    var fadeTime2 = 500;
    var fadeTime3 = 1000;
    var theImage1 = new Image();
    var theImage2 = new Image();
    var theImage3 = new Image();
    var url = imagePath + "/" + startindex + ".jpg";
    var urlb = imagePath + "/" + startindex + "-b.jpg";
    var url2b = imagePath + "/" + index1 + "-b.jpg";
        $(theImage1, theImage2, theImage3).load(function () {                   

                    $(theImage1).prependTo("#slider");
                    $(theImage2).prependTo("#slider");                      
                    $(theImage3).prependTo("#slider");

        $("#slider img:last").fadeOut(fadeTime, function() {
           $(this).remove();
           $("#slider img:last").fadeOut(fadeTime2, function() {
                $(this).remove();
                $("#slider img:last").fadeOut(fadeTime3, function() {
                        $(this).remove();
                        setTimeout(function() {
                                slideShow((index % (config.lastImage-config.startup)) + 1)
                                }, pauseTime);
            });
           }); 
           });
        });
        theImage1.src = url;
        theImage2.src = urlb;
        if(config.startup+index === config.lastImage) {
            theImage3.src = "slider/" + config.startup + "-b.jpg";
            } else {
            theImage3.src = url2b;
            };
    // }

     };
      return this;
     $(document).ready(function() {
        // Img 1 is already showing, so we call 2
        setTimeout(function() { $.blurSlider(2); }, pauseTime);
     });
  })(jQuery);

我不知道在插件中是否需要设置选择器。在这里我没有，因为选择器没有改变。在插件中调用document.ready是可能导致问题的另一件事。