我的文本幻灯片相互堆叠了几秒钟,然后才最终正常工作。 这是它的样子: 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 中 slider 的代码:
<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 后执行。您可以通过将所有 #textslider
子项的 display 属性设置为 none 来简单地将它移动到 css,除了第一个这样的:
#textslider div:not(:first-child) {
display: none;
}
参见 example .
关于javascript - 文本幻灯片在前 2 秒内相互堆叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36654314/