无法创建简单的文本幻灯片

Question

我尝试为文本创建简单的幻灯片，但无法弄清楚为什么单独的段落开始显示。我需要的是用class text-block更改完整的div块。

这是html：

<div id="text-blocks">
  <div class="text-block">
    <p>paragraph1</p>
    <p>paragraph2</p>
  </div>
  <div class="text-block">
    <p>paragraph3</p>
    <p>paragraph4</p>
    <p>paragraph5</p>
    <p>paragraph6</p>
    <p>paragraph7</p>
  </div>
</div>

和js：

$(document).ready(function(){
  $('.text-block:gt(0)').hide();
  setInterval(function(){
    $('#text-blocks :first-child').fadeOut()
      .next().fadeIn()
      .end()
      .appendTo('#text-blocks');
  },
  3000);
})

链接到jsFiddle：http://jsfiddle.net/e2wFK/

Answer 1

您只需将选择器更改为仅包含#text-blocks

的直接子项

$('#text-blocks > :first-child').fadeOut()

jsFiddle Demo

您之前的选择器$('#text-blocks :first-child')正在选择#text-blocks中的每个第一个孩子，包括.text-block个元素中的第一个段落。