JavaScript文本幻燈片

我想要使用JavaScript和/或jQuery將文本添加到div中，然後每10秒將該文本更改爲不同的文本 - 所以有點像幻燈片的純文本。這裏是我的代碼：JavaScript文本幻燈片

<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

的第一個參數爲'setTimeout'是一個函數。 '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

它不是_setIntervale_，而是_setInterval_。 –

使用的功能，並調用它的身體的onload

<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

JavaScript文本幻燈片

回答

相關問題