0

我创建了一个幻灯片，使用具有淡入淡出效果的 jquery，幻灯片的问题是如果我添加图像，它会正确显示，但是如果我添加文本而不是图像，文本会从下到上弹跳，我希望它被修复在上面。实际上这个问题很可能是因为，我正在做的是，我有六个li我首先启用li并禁用休息，现在我给第一个淡出效果和下一个淡入li效果li，现在到第一个li淡出和下一个li淡出在那个时候，文本反弹，但我不明白为什么图像不会发生这种情况，这是我的完整代码。

您可以下载完整的项目并查看

当前 div 包含图像，如果将其替换为 h1 元素，则可以看到错误的输出

4

1 回答 1

0

所以使用 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>

那么你的javascript是：

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

淡入淡出效果 (fx) 是循环插件中的标准效果。 slideExpr定义一个 jquery 选择器来选择幻灯片的主（在本例中#slideshow）包装器中的幻灯片元素。

于 2012-04-16T23:34:58.793 回答