jQuery 滑块片段，转换为插件

Question

我发现了这个很棒的小 jquery 图像滑块 sn-p：

var x = 2;
// function to switch the images.
function slideSwitch() {
          var m = 5;
           x += 1;
          if (x > m) {
            x = 1
            }

   $(".slideshow ul li:nth-child(n)").animate({opacity:0});
   $(".slideshow ul li:nth-child(" + (x) + ")").animate({opacity:1});
}

$(document).ready(function() {
      setInterval( "slideSwitch()", 5000 );
});

并且一直在尝试将其转换为插件以便能够多次使用它，但我没有任何运气......请帮助。

我对插件的尝试：（不起作用）

(function ($) {
  $.fn.slidr = function (opts) {
    var def = {
      imgs : 4,
      sid  : 'slidr'
    },
    opts = $.extend({}, def, opts);

    var nxt = 2;

    this.each(function () {

var nxt += 1;

if (nxt > opts.imgs) {
     nxt = 1;
}

$('.'+ opts.sid + ' ul li:nth-child(n)').animate({opacity:0});
$('.'+ opts.sid + '  ul li:nth-child(' + (nxt) + ')').animate({opacity:1});

    });
    return this;
  }
})(jQuery);


$(document).ready(function() {

setInterval( $('#content').slidr(), 2000);

});

原始sn-p：http://jsfiddle.net/8T7nX 插件尝试不起作用：http://jsfiddle.net/8T7nX/1

Answer 1

似乎你会重新发明轮子： http://jquery.malsup.com/cycle/ 这个插件正是你所需要的！

我还调整了你的小提琴：http://jsfiddle.net/8T7nX/4/

当您只想向它添加一个时，您正在覆盖您的 nxt var（从它前面删除了 var）

(function ($) {
  $.fn.slidr = function (opts) {
    var def = {
      imgs : 4,
      sid  : 'slide'
    },
    opts = $.extend({}, def, opts);

    var nxt = 2;

    this.each(function () {

  nxt += 1;

if (nxt > opts.imgs) {
     nxt = 1;
}

$('.'+ opts.sid + ' ul li:nth-child(n)').animate({opacity:0});
$('.'+ opts.sid + '  ul li:nth-child(' + (nxt) + ')').animate({opacity:1});

    });
    return this;
  }
})(jQuery);


$(document).ready(function() {

setInterval( function() { $('#content').slidr() }, 2000);

});

Answer 2

如果您对原始代码出错的地方感兴趣，请查看以下内容：

http://jsfiddle.net/Willyham/JmgFV/

虽然我建议重用一个更全面的解决方案，因为此代码的结构还有很多不足之处。

(function($) {
    $.fn.slidr = function(opts) {
        var def = {
            imgs: 4,
            timeout: 2000
        },
            opts = $.extend({}, def, opts);

        var nxt = 2;
        var el = $(this);

        function animate() {
            if (nxt > opts.imgs) nxt = 1;
            $('ul li:nth-child(n)', el).animate({
                opacity: 0
            });
            $('ul li:nth-child(' + (nxt) + ')', el).animate({
                opacity: 1
            });
            nxt++;
        }

        return this.each(function() {
            setInterval(animate, opts.timeout);
        });
    }
})(jQuery);


$(document).ready(function() {
    $('#n1').slidr();
    $('#n2').slidr({
        timeout: 5000
    });
});​

Answer 3

我看不出那个脚本有什么毛病。看起来你可以做得更简单。这样你就不需要告诉插件你有多少张图片了。

;(function($){
  $.fn.slider = function(){
    return this.each(function(){
      var $li = $(this).find('li'),
          i = 1,
          slide
      $li.hide().first().show()
      slide = function(){
        $li.hide()
        if (i < $li.length) {
          $li.eq(i).fadeIn()
          i++
        } else {
          $li.first().fadeIn()
          i = 1
        }
      }
      setInterval(slide, 1000)
    })
  }
}(jQuery))

演示： http://jsfiddle.net/elclanrs/8T7nX/5/