0

以下の例に示されているのと同じフェードインおよびフェードアウト効果を作成したい:

http://www.spicypeanut.net/Slideshow/Slideshow.html

http://www.spicypeanut.net/Blog/jQuery%20Slideshow.html

しかし、問題は - この例は 3 つのスライド用にのみ作成されたもので、3 つ以上のスライドが必要な場合、またはこれを動的に増やす必要がある場合です。

しかし、最大量のスライドを自動的に取得するようにスクリプトを変更するにはどうすればよいですか? たとえば、cms 内で動的なスライドを生成した場合、スライドの最大数は誰にもわかりません。そのため、この部分で毎回手動で *.js を更新する必要があります:/

if (this.Last < 1) { 
this.Last = 3;
} 

if ($$.Slideshow.Counter > 3) 
{ 
$$.Slideshow.Counter = 1; # 
}

この時点で私（そして他の多くの人も）を助けてくれればいいのですが:)

以下は、この例で使用されている JS です。

var $$ = $.fn;

$$.extend({
  SplitID : function()
  {
    return this.attr('id').split('-').pop();
  },

  Slideshow : {
    Ready : function()
    {
      $('div.tmpSlideshowControl')
        .hover(
          function() {
            $(this).addClass('tmpSlideshowControlOn');
          },
          function() {
            $(this).removeClass('tmpSlideshowControlOn');
          }
        )
        .click(
          function() {
            $('div.tmpSlide').hide();
            $('div.tmpSlideshowControl').removeClass('tmpSlideshowControlActive');

            $('div#tmpSlide-' + $(this).SplitID()).show()
            $(this).addClass('tmpSlideshowControlActive');
          }
        );

      this.Counter = 1;

      this.Transition();
    },

    Transition : function()
    {
      if (this.Interrupted) {
        return;
      }

      this.Last = this.Counter - 1;

      if (this.Last < 1) {
        this.Last = 3;
      }

      $('div#tmpSlide-' + this.Last).fadeOut(
        'slow',
        function() {
          $('div#tmpSlideshowControl-' + $$.Slideshow.Last).removeClass('tmpSlideshowControlActive');
          $('div#tmpSlideshowControl-' + $$.Slideshow.Counter).addClass('tmpSlideshowControlActive');
          $('div#tmpSlide-' + $$.Slideshow.Counter).fadeIn('slow');

          $$.Slideshow.Counter++;

          if ($$.Slideshow.Counter > 3) {
            $$.Slideshow.Counter = 1;
          }

          setTimeout('$$.Slideshow.Transition();', 5000);
        }
      );
    }
  }
});

$(document).ready(
  function() {
    $$.Slideshow.Ready();
  }
);

私もいくつかの研究開発を行っており、もう1つの驚くべき問題を発見しました:

Last vale を 3 から 5 に増やした場合、ナビゲーション コントロールに問題が表示されます。たとえば、スライドが 4 の場合に 2 をクリックすると、ナビゲーションが前のトラックに移動し、3 ではなく 5 に移動します。

誰かがこれで私を助けることができればお願いします。

4

1 に答える 1

1

スライド数に静的な値を設定する代わりに、jQuery を使用して.lengthを使用してスライド数を取得します。

// Get number of slides
var slideCount = $("#tmpSlideshow > .tmpSlide").length;

if (this.Last < 1) { 
    this.Last = slideCount;
} 

if ($$.Slideshow.Counter > slideCount) { 
    $$.Slideshow.Counter = 1;
}
于 2013-04-04T14:07:14.667 に答える