淡出幻灯片Jquery问题

我已经创建了一个幻灯片，使用具有淡入效果的jquery，幻灯片的问题是如果我添加图像，它会正确显示，但是如果我添加文本而不是图像，文本会从下到上反弹，我希望它固定在顶部。实际上，这个问题很可能是因为，我正在做的是，我有六个

li

我正在启用first

li

并禁用rest，现在我将淡出效果赋予first

li

并将淡出效果赋予next

li

，现在，当第一个

li

淡出，下一个

li

淡入时，文本会反弹，但我不明白为什么图像不会出现这种情况，这是我的完整代码

您可以查看

---

当前div包含图像，如果用h1元素替换它，您可以看到错误的输出

，因此使用jquery.cycle，设置淡入淡出效果如下所示。您的HTML应该如下所示：

<div id="slideshow">
    <div class="slide">
        <p>Some text</p>
        <img ... />
    </div>
    <div class="slide">
        <p>Some text</p>
        <img ... />
    </div>
    <!-- more slides ... -->
</div>

---

淡入淡出效果（fx）是cycle插件中的标准效果

slideExpr

定义了一个jquery选择器，用于选择幻灯片主包装（在本例中为

#slideshow

）中的幻灯片元素。

使用jquery.cycle插件。这将使幻灯片放映更容易，而不是重新发明轮子。你能给我举个例子吗，使用jQuery.cycle，实际上我想制作一个包含图像和文本的幻灯片，并且应该有淡入淡出效果，这个插件有那个功能吗，你能给我展示一些可用的演示吗，我如何以正确的方式实现这个插件见一个简单的jQuery.cycle解决方案的答案

$('#slideshow').cycle({
    fx:'fade',
    slideExpr: '.slide'
});