javascript - Display different <h1> text on interval -
i take array of quotes , display different qoute on page every 6 seconds.
i have tried using javascript function loops through array , fades in new qoute. keep getting error qoutes
not defined. have tried moving array function , $(document).ready()
function , still got same error.
below app.js code:
var quotes = [ "don't limit challenges, challenge limits.", "if doors of perception cleansed every thing appear man is, infinite.", "the power of imaginiation makes infinite", "the finite mind tries limit infinite.", "the limits in our life impose on ourselves." ]; var quotetimer = function(){ for(var = 0; i< qoutes.length; i++){ $('.container').find('h1').fadein().text(qoutes[i]); } } $(document).ready(function(){ setinterval(quotetimer, 6000); });
adjust time delay , should trick
update: added fading
update2: removed placeholder, added comments
var quotes = [ "don't limit challenges, challenge limits.", "if doors of perception cleansed every thing appear man is, infinite.", "the power of imaginiation makes infinite", "the finite mind tries limit infinite.", "the limits in our life impose on ourselves." ]; // variable keep track of last quote displayed var = 0; // displays next quote in array var quotetimer = function() { // if @ end of array, reset if (i >= quotes.length) { = 0; } // fade out previous quote, // while hidden, change text next quote on array $('h1').fadeout(1000, function(){ $(this).text(quotes[i]); }); // display quote $('h1').fadein(); // increment counter 1 i++; } $(document).ready(function() { $('h1').text(quotes[i++]); // initialize first quote setinterval(quotetimer, 6000); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h1></h1>
Comments
Post a Comment