Question

我发现这个很棒的小jquery图像滑块：

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

});

原始摘录：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/

jQuery滑块，转换为插件

3 个答案: