Javascript Text Slideshow

Ich versuche, Text in ein div mit JavaScript und/oder jQuery und dann diesen Text zu ändern, um alle 10 Sekunden ändern Text - so etwas wie eine Diashow von nur Text. Hier ist mein Code: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>

Quelle

2013-09-28 RMi Flores

Die erste ARG 'setTimeout' ist eine Funktion. 'setTimeout' ruft diese Funktion einfach rekursiv auf. Also, in Ihrem Fall, setzen Sie einfach den Js-Code in eine Funktion und schreiben Sie dann den Namen dieser Funktion als erstes Argument. – 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

Quelle

2013-09-28 19:52:12

Hier ist ein Vorschlag mit einfachen JS

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

Demo here

Wenn Sie jQuery verwenden möchten, können Sie diese verwenden: $('#textslide p:first').text(quotes[counter]);

Demo here

Quelle

2013-09-28 19:53:00 Sergio

statt, während die Verwendung:

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

Quelle

2013-09-28 19:53:25

Es ist nicht _setIntervale_, sondern _setInterval_. –

eine Funktion verwenden und es auf Körper onload nennen

<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>

Quelle

2013-09-28 20:07:35 Kobbe

Javascript Text Slideshow

Antwort

Verwandte Themen