Question

我正在尝试创建一个简单的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，每个都有不同的内容，所以没有指定高度，也因为我没有相对于.slideshow添加位置，而是在其中的divs中添加绝对值。为什么？因为如果我这样做，我将不得不给它一个固定的高度。

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

Answer 1

使用这样的函数回调：

//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的函数意味着当fadeOut完成时，执行函数中指定的操作。

<强> DEMO

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

1 个答案: