0

我用 jQuery 文件夹中的图像创建了一个小幻灯片，并在 stackoverflow 和其他片段的帮助下。

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

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

现在我想用它制作一个真正的 jQuery 插件，因为我想更改每个站点上的启动（图像编号）和 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 调用是另一件可能导致问题的事情。

4

0 回答 0