Javascript報價循環 - 完成後跳到第一個

Question

我遇到了腳本問題，因爲一旦所有子元素都被循環，我無法返回到第一個元素。

https://jsfiddle.net/pad5bp0o/2/

$(document).ready(function() { 
 
    var length = $("#tips li").length; 
 
    var old = 0; 
 

 
    function show() { 
 
    var news = getRan(); 
 
    $("#tips li").hide(); 
 
    $("#tips li:nth-child(" + news + ")").fadeIn("fast"); 
 
    old++; 
 
    }; 
 

 
    function getRan() { 
 
    var news = old + 1; 
 
    if (news < length) { 
 
     return news; 
 
    } else { 
 
     var news = 0 + 1; 
 
     return news; 
 
     old++; 
 
    } 
 
    }; 
 

 
    show(); 
 
    $("#something").html(length); 
 
    setInterval(show, 1000); 
 

 
});

#tips, 
 
#tips li { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 

 
#tips { 
 
    width: 250px; 
 
    font-size: 16px; 
 
    line-height: 120%; 
 
} 
 

 
#tips li { 
 
    padding: 20px; 
 
    background: #e1e1e1; 
 
    display: none; 
 
    /* hide the items at first only */ 
 
} 
 

 
.active { 
 
    opacity: 1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul id="tips"> 
 
    <li>... if you want to become a better coder you need to eat your vegetables?</li> 
 
    <li>... it takes more time to code a web page then to make a pizza?</li> 
 
    <li>... you should validate your code?</li> 
 
    <li>... jQuery is your friend? For real!</li> 
 
    <li>... no matter what some people claim, you can't learn CSS in 3 hours?</li> 
 
</ul> 
 
<div id="something"></div>

Answer 1

需要，一旦你到達最後一個元素重置old變量。

function getRan() { 
    var news = old + 1; 
    if (news <= length) { 
     return news; 
    } 

    news = 1; 
    old = 0; 
    return news; 
}; 

DEMO

Answer 2

重置變量（old）到初始值（1）一次極限（5）爲止。

您還可以簡化如下所示的功能。 Updated fiddle

$(document).ready(function() { 
 
    var length = $("#tips li").length; 
 
    var old = 1; 
 

 
    function show() { 
 
    $("#tips li").hide(); 
 
    $("#tips li:nth-child(" + old + ")").fadeIn("fast"); 
 
    if (old == length) { 
 
     old = 1; 
 
    } else { 
 
     old++; 
 
    } 
 
    }; 
 

 
    show(); 
 
    $("#something").html(length); 
 
    setInterval(show, 1000); 
 

 
});

#tips, 
 
#tips li { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 
#tips { 
 
    width: 250px; 
 
    font-size: 16px; 
 
    line-height: 120%; 
 
} 
 
#tips li { 
 
    padding: 20px; 
 
    background: #e1e1e1; 
 
    display: none; 
 
    /* hide the items at first only */ 
 
} 
 
.active { 
 
    opacity: 1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="tips"> 
 
    <li>1. ... if you want to become a better coder you need to eat your vegetables?</li> 
 
    <li>2. ... it takes more time to code a web page then to make a pizza?</li> 
 
    <li>3. ... you should validate your code?</li> 
 
    <li>4. ... jQuery is your friend? For real!</li> 
 
    <li>5. ... no matter what some people claim, you can't learn CSS in 3 hours?</li> 
 
</ul> 
 
<div id="something"></div>