文本幻灯片在前 2 秒内相互堆叠

Question

我的文本幻灯片相互堆叠了几秒钟，然后才最终正常工作。这是它的样子： Stacked text slideshow 我该怎么做才能解决这个问题？这是文本的代码：

            <div id="textslider"> 

            <div style="position: absolute; left: 50%;">
                <p style="position: relative; left: -50%; border: none;"> 
                    <?php echo get_field('testimony1'); ?> 
                </p>
            </div>

            <div style="position: absolute; left: 50%;">
                <p style="position: relative; left: -50%; border: none;"> 
                    <?php echo get_field('testimony2'); ?> 
                </p>
            </div>

            <div style="position: absolute; left: 50%;">
                <p style="position: relative; left: -50%; border: none;"> 
                    <?php echo get_field('testimony3'); ?> 
                </p>

            </div>

            </div>

下面是 jQuery 中滑块的代码：

    <script src="http://code.jquery.com/jquery-latest.min.js"></script>

    <script>

$('#textslider > div:gt(0)').hide();

setInterval(function() { 
$('#textslider > div:first').fadeOut(500)
.next()
.fadeIn(1000)
.end()
.appendTo('#textslider');
},  3000);

      </script>

Answer 1

$('#textslider > div:gt(0)').hide(); 仅在加载 jQuery 后执行。您可以通过将显示属性设置为 none 将所有 #textslider 子项简单地移动到 css，第一个除外：

#textslider div:not(:first-child) {
  display: none;
}

参见example。

文本幻灯片在前 2 秒内相互堆叠

Text slideshow stacking on top of each other for first 2 seconds

javascript

css

jquery

slider

slideshow