淡入单个和旋转文本Jquery

我试图实现非常类似于这个文本滑块 在第一张幻灯片上，它逐段显示，然后在第二张幻灯片上，它同时显示整个段落。 我已经实现了这一点，但我的问题是我无法在第一个div上逐个显示文本并循环它

(function() {

    var quotes = $(".quotes");
    var quoteIndex = -1;

    function showNextQuote() {
        ++quoteIndex;
        quotes.eq(quoteIndex % quotes.length)
            .fadeIn(2000)
            .delay(2000)
            .fadeOut(2000, showNextQuote);



    }

    showNextQuote();

})();


$(document).ready(function(){
    var numOfLines = 2;
    var delay = 1000;
    var fadeTime = 1000;
    for (i = 0; i < numOfLines + 1; i++) { 
       $('#delayedText' + i).delay(delay * i).fadeIn(fadeTime);
    }
});

---

高级感谢

查看这是否满足您的要求：

jQueryfunction${ var$quotes=$'.quotes'； 函数环{ setTimeoutfunction{ $quotes.eq0.fadeIn1000，函数{ setTimeoutfunction{ $quotes.eq1.fadeIn1000，函数{ setTimeoutfunction{ $quotes.fadeOut1000，函数{ /*从这里开始递归*/ 环 }; }, 500 }; }, 500; }; }, 500; } 环 }; .quotes{显示：无；} 第一句话

---

第二句话你可以用纯CSS实现：

HTML:

---

在已有内容的基础上，您需要为要淡入的元素使用容器，然后只需执行与现有内容类似的操作，但要针对每个内容块

代码笔示例：

作用{ var quotes=$.slide； var quoteIndex=0； var-slideDuration=0； var headlineDelay=500； 功能幻灯片{ $this=quotes.eqquoteIndex%quotes.length； $this.fadeInslideDuration.delay2000.fadeOut2000，showSlide； $this.find.content.attrstyle，； $this.find.content.eachfunctioni{ $this.delayheadlineDelay*i.fadeIn500； }; ++报价索引； }; }; .幻灯片{ 显示：无； } .内容{ 显示：无； } 幻灯片1-标题1 幻灯片1-标题2 幻灯片1-标题3 幻灯片2-标题1 幻灯片2-标题2

---

您的问题和JSFIDLE都缺乏足够的内容来描述您的问题。您的html中只有两个h2s，但您说您不能显示它们，然后再进行幻灯片。您将需要至少两个滑动的容器，其中包含内容。投票关闭是不清楚的，因为您的代码似乎已经完成了您想要的操作：它在淡入第二个引号之前淡出一个引号，然后循环，再次淡入第一个引号。@Draco18s我不同意关闭。代码片段只需要updated@TylerFowle关闭原因说明，请澄清您的具体问题或添加其他详细信息，以突出显示您的确切需要。您自己的评论说，您的问题和JSFIDLE缺少足够的内容来描述您的问题。这两种说法是相同的，我觉得是有道理的。当然，无论如何，我都不同意。但是，除非进行编辑，否则我不会撤回我的投票。对它进行了一些编辑。为了澄清，我只想要类似的东西，但我无法与第一张幻灯片的逐行行为相匹配。但是我如何将其应用到下一张幻灯片上？我需要在第一张幻灯片上这样显示，但在第二张幻灯片上，段落必须是完整的。您只需使用quote4类做一个div，然后放置下三个这里有引文。然后制作另一组关键帧，如下所示：@keyframes.quote4{0%，50%{opacity:0}55%，90%{opacity:1}95%{opacity:0}。

<h2 class="quotes quote1">first quote</h2>
<h2 class="quotes quote2">second quote</h2>
<h2 class="quotes quote3">third quote</h2>

.quotes{
  opactiy:0;
  transition: opacity .3s linear;
  animation-duration:10s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.quote1{
   animation-name: quote1;
}
.quote2{
   animation-name: quote2;
}
.quote3{
   animation-name: quote3;
}

@keyframes quote1{0%,45%,100%{opacity:1}50%,95%{opacity:0}}

@keyframes quote2{0%,10%{opacity:0}15%,45%{opacity:1}50%,100%{opacity:0}}

@keyframes quote3{0%,25%{opacity:0}30%,45%{opacity:1}50%,100%{opacity:0}}