Question

可能重复：
"Flashing" random text with javascript

我无法弄清楚如何制作这个可能是愚蠢的事情。我有几个文本短语，我必须切换和循环渐变过渡。

如何在jquery中构建这些东西？提前谢谢。

Answer 1

HTML -

<div id="container">
    <p>Text 1</p>
    <p>Text 2</p>
    <p>Text 3</p>
    <p>Text 4</p>
</div>

CSS -

#container {
    position: relative;
}
#container p {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}

JavaScript -

function rotate_p() {
    if (p_current == p_count) {
        p_current = 1;
    } else {
        p_current++;
    }
    var $container = $('#container');
    $container.find('p').fadeOut();
    $container.find('p:nth-child(' + p_current + ')').fadeIn();
}

var p_count;
var p_current = 0;
var p_interval;
$(document).ready(function () {
    p_count = $('#container').find('p').length;
    p_interval = setInterval(function () {rotate_p();}, 2500);
});

这使用一个时间间隔来循环容器<p>中的<div>标记。 <p>标记设置为相同的位置，因此淡入/淡出将显示在彼此之上。在文档加载时，找到<p>标记的数量并将其存储在全局变量中。在区间中运行的函数会隐藏包含<p>中的所有<div>标记，然后显示下一个标记。

以下是上述代码的jsfiddle：http://jsfiddle.net/Z8s7d/

在查询中循环和淡化不同的文本短语

1 个答案: