文本幻灯片在前2秒内堆叠在一起

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

本文关键字：在一起 2秒 幻灯片 文本      更新时间：2024-07-12

我的文本幻灯片在最后正常工作之前会堆叠几秒钟。以下是它的样子：堆叠文本幻灯片我该怎么办？这是文本的代码：

            <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>

$('#textslider > div:gt(0)').hide();只有在加载jQuery后才能执行。您可以简单地将其移动到css，方法是将所有#textslider子级（第一个子级除外）的display属性设置为none：

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

请参见示例。

相关文章：