javascript - 我们如何才能将幻灯片限制增加到动态，目前它只设置了 3 张幻灯片

Question

我想创建相同的 fadeIn 和 fadeOut 效果，如下例所示:

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

连我自己也做了一些研发，发现了一个更惊人的问题:

当我将其 Last vale 3 增加到 5 然后它在导航控件中显示问题 - 就像如果你的幻灯片在 4 然后如果你点击 2 那么你的导航将在之前的轨道上移动意味着它将移动到 5 而不是3.

如果有人可以帮助我解决这个问题。

Answer 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;
}