Javascript Text Slideshow

JavaScriptやjQueryを使用してdivにテキストを追加しようとしていて、そのテキストを10秒ごとに別のテキストに変更しようとしています。ここに私のコードは次のとおりです。Javascript Text Slideshow

<div id="textslide"><p></p></div> 

<script> 

var quotes = new Array(); 

quotes[0] = "quote1"; 
quotes[1] = "quote2"; 
quotes[2] = "quote3"; 
quotes[3] = "quote4"; 
quotes[4] = "quote5"; 

var counter = 0; 

while (true) { 
    if (counter > 4) counter = 0; 
    document.getElementById('textslide').firstChild.innerHTML = quotes[counter]; 
    counter++; 
    setTimeout(// not sure what to put here, 500); // Want to delay loop iteration 
} 

</script>

出典

2013-09-28 RMi Flores

onloadの体にそれを呼び出します。 'setTimeout'はその関数を再帰的に呼び出すだけです。したがって、あなたの場合は、jsコードを関数に入れて、その関数の名前を最初のargとして記述します。 – stackptr

HTML：

<div id="textslide"><p></p></div>

のJavaScript/jQueryの：ここで

var quotes = [ 
    "quote1", 
    "quote2", 
    "quote3", 
    "quote4", 
    "quote5", 
    ]; 

var i = 0; 

setInterval(function() { 
$("#textslide").html(quotes[i]); 
    if (i == quotes.length) { 
     i = 0; 
    } 
    else { 
     i++; 
    } 
}, 10 * 1000);

Working demo here

出典

2013-09-28 19:52:12

はプレーンJS

との提案です

function loop() { 
    if (counter > 4) counter = 0; 
    document.getElementById('textslide').firstElementChild.innerHTML = quotes[counter]; 
    counter++; 
    setTimeout(loop, 500); 
} 
loop();

デモhere

あなたはjQueryのを使用したい場合は、この使用することができます：$('#textslide p:first').text(quotes[counter]);

デモhere代わりにしばらくの

出典

2013-09-28 19:53:00 Sergio

、使用：

setInterval(function() { 
    //do your work here 
}, 10000);

を

出典

2013-09-28 19:53:25

_setInterval_ではなく_setIntervale_です。 –

機能を使用してsetTimeout` `への最初の引数が関数である

<html> 
    <head> 
     <script> 
     var counter = 0; 

     function changeText() 
     { 
     var quotes = new Array(); 

     quotes[0] = "quote1"; 
     quotes[1] = "quote2"; 
     quotes[2] = "quote3"; 
     quotes[3] = "quote4"; 
     quotes[4] = "quote5"; 

     if (counter > 4) 
      { 
      counter = 0; 
      } 

     document.getElementById("textslide").innerHTML = quotes[counter]; 

     setTimeout(function(){changeText()},10000); 
     counter ++; 
     } 
     </script> 
    </head> 
    <body onload="changeText();"> 
     <p id="textslide"></p> 
    </body> 
</html>

出典

2013-09-28 20:07:35 Kobbe

答えて

関連する問題