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

甚至我也做了一些研发，发现了一个更惊人的问题：

当我将其 Last vale 3 增加到 5 时，它在导航控件中的显示问题 - 比如如果您的幻灯片在 4 上，那么如果您单击 2，那么您的导航将在上一个轨道上移动，这意味着它将移动到 5 而不是 3。

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

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 回答