JS和HTML幻灯片跳转不使用绝对位置

JS and HTML slideshow jumps is not using position absolute

本文关键字：位置 HTML 幻灯片 JS      更新时间：2023-09-26

我正在尝试创建一个简单的 Div 幻灯片，这是我到目前为止所拥有的：http://jsfiddle.net/ZZLHF/

.HTML：

<div class="slideShow">
    <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled including versions of Lorem Ipsum.
    </div>
    <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</span>
    </div>
</div>

.JS：

//Side Show
$(function () {
    $('.slideShow div:gt(0)').hide();
    setInterval(function () {
        $('.slideShow > :first-child').fadeOut().next('div').fadeIn().end().appendTo('.slideShow');
    }, 1200);
});

正如你在JSfiddle中看到的 - 它会滑动，但它会跳跃！那是因为我有两个div，每个div都有不同数量的内容，所以没有指定高度，也因为我没有添加相对于.slideshow的位置和绝对的位置到其中的div。为什么？因为如果我这样做，我将不得不给它一个固定的高度。

如何阻止它跳跃并自动给它高度？

使用如下函数回调：

//Side Show
$(function () {
    $('.slideShow div:gt(0)').hide();
    setInterval(function () {
        // 400 is default value
        $('.slideShow > :first-child').fadeOut(400, function(){
            $(this).next('div').fadeIn().end().appendTo('.slideShow');
        })
    }, 1200);
});

传递给 .fadeOut 的函数意味着当淡出完成时，执行函数中指定的操作。

演示

相关文章：