Es una pequeña tarea escolar. Los dibujos cambian correctamente, esa parte la dio el profesor y entiendo como funciona el cambio de imagen. Pero no entiendo cómo debo hacer que una matriz de texto cambie los textos. Probé algunos ejemplos que estaban en línea pero no funcionaron con el código que tengo. este es el html
<!DOCTYPE html> <html> <head> <title>Rotating Banner</title> <script src="script07.js" language="javascript" type="text/javascript" ></script> </head> <body> <div align="center"> <img src="reading1.gif" width="400" height="75" id="adBanner" alt="Ad Banner" /> </div> <span id="example">Start</span> </body> </html>Este es el javascript. La primera parte funciona bien.
La parte "var texts" se encontró en línea. El segundo ejemplo de JS después de este que traté de recrear en función de la rotación de la imagen.
window.onload = rotate; var adImages = new Array("reading1.gif", "reading2.gif", "reading3.gif"); var thisAd = 0; function rotate() { thisAd++; if (thisAd == adImages.length) { thisAd = 0; } document.getElementById("adBanner").src = adImages[thisAd]; setTimeout("rotate()", 3 * 1000); } var texts = ["example1", "example2", "example3"]; var count = 0; function changeText() { document.getElementById("example").texts; count < 3 ? count++ : (count = 0); } setInterval(changeText, 3 * 1000);También probé esto:
window.onload = rotate; var adImages = new Array("reading1.gif", "reading2.gif", "reading3.gif"); var thisAd = 0; function rotate() { thisAd++; if (thisAd == adImages.length) { thisAd = 0; } document.getElementById("adBanner").src = adImages[thisAd]; setTimeout("rotate()", 3 * 1000); } window.onload = rotate2; var adTexts = new Array("Tere", "Head aega", "Mul pole aega"); var thisText = 0; function rotate2() { thisText++; if (thisText == adTexts.length) { thisText = 0; } document.getElementById("example").span = adTexts[thisAd]; setTimeout("rotate()", 3 * 1000); }En realidad, solo hay una línea que debe cambiar en su primer enfoque JS:
document.getElementById("example").textContent = texts[count];
window.onload = rotate; var adImages = new Array("reading1.gif", "reading2.gif", "reading3.gif"); var thisAd = 0; function rotate() { thisAd++; if (thisAd == adImages.length) { thisAd = 0; } document.getElementById("adBanner").src = adImages[thisAd]; setTimeout("rotate()", 3 * 1000); } var texts = ["example1", "example2", "example3"]; var count = 0; function changeText() { document.getElementById("example").textContent = texts[count]; count < 3 ? count++ : (count = 0); } setInterval(changeText, 3 * 1000); <!DOCTYPE html> <html> <head> <title>Rotating Banner</title> <script src="script07.js" language="javascript" type="text/javascript" ></script> </head> <body> <div align="center"> <img src="reading1.gif" width="400" height="75" id="adBanner" alt="Ad Banner" /> </div> <span id="example">Start</span> </body> </html>