Question

我对JQuery很陌生，我只是抓住了HTML / CSS的概念，现在我已经准备好了更高级的代码，而且我已经看到了一些漂亮的代码在JQuery中完成了很棒的事情！

所以我在这个div中有一个名为＆＃39; contnet＆＃39;的类，在一个部分中有多个，但是我只希望在一个单独的时间显示一个，相互淡入和淡出

我知道有.fadeIn和.fadeOut函数，但是我不知道如何在循环中循环它们。

谢谢！

Answer 1

刚刚为你做了JSFiddle

如果我的理解是正确的，这应该可以胜任！虽然我只是在我的div中使用图像，但您可以将任何内容放在那里。

<强> HTML

<div class="imgloop">
    <img src="http://hq.squidoo.com/files/2013/01/draft_lens14637921_1287867138penguin_posters.png"/>
</div>
<div class="imgloop">
    <img src="http://www.openlettersmonthly.com/likefire/wp-content/uploads/2011/11/angry-penguin.jpg"/>
</div>

<强> CSS

.imgloop {
    width:250px;
    height:250px;
    display:none;
}

<强> JQuery的

(function() {

    var imgloop         = $(".imgloop");
    var imgloopIndex = -1;

    function showNextimgQuote() {
        ++imgloopIndex;
        imgloop.eq(imgloopIndex % imgloop.length)
        .fadeIn(1000)
        .delay(4000)
        .fadeOut(1000, showNextimgQuote);
    }

    showNextimgQuote();

})();


        .fadeIn(1000)

设置新内容淡入所需的时间。

        .delay(4000)

设置内容对观看者可见的时长。

        .fadeOut(1000, showNextimgQuote);

设置内容淡出所需的时间。

注意：这些值以毫秒为单位，1000等于一秒。

使用JQuery循环Div内容

1 个答案: