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

Question

我尝试为文本创建简单的幻灯片，但无法弄清楚为什么单独的段落开始出现。我需要的是用类文本块更改完整的 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。