Question

我正在尝试一种方法来实现某些文本的幻灯片效果，实际上它会自动启动并显示第一个h4元素而不是淡化它并在下一个中淡入，依此类推所有h4元素，一旦它到达最后一个，它应该再次重复。

测试的样本标记是

<div id="slideshow">
    <h4 class="slideshow-element">Test 1</h4>
    <h4 class="slideshow-element">Test 2</h4>
    <h4 class="slideshow-element">Test 3</h4>
    <h4 class="slideshow-element">Test 4</h4>
</div>

其中h4基本上相互重叠并且最初是隐藏的。知道如何添加更多的css属性除了淡入淡出以实现各种效果之外，这也是很好的。我知道有插件可以做到这一点，但我想要一个适用于任意数量的h4元素的特定轻量级解决方案。

到目前为止，我想出了一个让它循环的地方，我定义了一个负责添加各种效果的函数，一旦完成，它再次调用自己。我想我可以使用类添加到h4元素以将样式应用到它们并可能转换？

Answer 1

Here's a JSFiddle

这是JQuery：

jQuery(document).ready(function(){ 
    $(function(){
        $('#slideshow h4:gt(0)').hide();
        setInterval(function(){
          $('#slideshow :first-child').fadeOut(2000)
             .next('h4').fadeIn(2000)
             .end().appendTo('#slideshow');}, 
          2000);
    });
});

它的作用几乎淡出幻灯片的第一个孩子，淡化下一个孩子，然后将第一个孩子添加到h4系列的结尾

淡入/淡出文本幻灯片

1 个答案: