0

私はこの素晴らしい小さな 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

4

3 に答える 3

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

});
于 2012-05-12T23:34:24.063 に答える
1

元のコードのどこに問題があったのか興味がある場合は、次をご覧ください。

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
    });
});​
于 2012-05-12T23:43:38.830 に答える
0

そのスクリプトの何が曖昧なのかわかりません。もっと簡単にできるようです。この方法では、プラグインに画像の数を伝える必要はありません。

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

于 2012-05-12T23:38:00.050 に答える