Question

拥有此HTML

<span style="display:none">slogan 1</span>
<span style="display:none">slogan 2</span>
<span style="display:none">slogan 3</span>

有这个JS：

var timer = 0;
$('.banner').children('span').each(function(index) {
  timer = timer + 2000;
  $(this).delay(2500*index).fadeIn(timer, 'linear').fadeOut('3000', 'linear');
});

JS基本上遍历每个跨度淡入淡出它们。但它只做一次（从口号1到口号3）。我想以某种方式循环跨越我想要的次数。 for（）{}做不正确的方法。

你可以帮帮我吗？感谢。

Answer 1

(function fade(num, idx, cycles) {
  var
    spans = $('span'),
    idx = idx || 0, idx = idx < spans.length ? idx : 0,
    cycles = typeof cycles === 'undefined' ? num * spans.length : cycles;

  if (cycles > 0) {
    spans.eq(idx).fadeIn().fadeOut(function () {
      fade(num, idx + 1, cycles - 1);
    });
  }
}(2 /* two runs total*/));

Answer 2

这应该适合你 - http://jsfiddle.net/ML5b5/1/

<span>slogan 1</span>
<span style="display:none">slogan 2</span>
<span style="display:none">slogan 3</span>

var spanCounter = 0;

setInterval(function(){
    var $span = $('span').eq(spanCounter);
    spanCounter = cycleSpan($span, spanCounter);
    spanCounter = (spanCounter >= $('span').length) ? 0 : spanCounter;
}, 3000)

function cycleSpan($span, spanCounter) {
    $span.fadeOut('slow', function(){
        if ($span.next('span').length) {
            $span.next().fadeIn('slow');
        } else {
            $span.siblings('span:first').fadeIn();
        }
    });
    return ++spanCounter;
};

这在全局范围内使用了一个计数器变量，我不太喜欢，但你可以尝试重构它来取出它。此代码基本上循环遍历跨度并将其发送到循环函数，该函数将隐藏当前跨度并显示下一个跨度。您可能希望使用类更新这些跨度，以便它们不会弄乱其余文档。

jQuery：淡出span容器

2 个答案: