Hay muchas maneras de acaparar la imagen. Aquí hay una simple: implementación de la matriz JS.
Primero almacene la ruta de imagen en la matriz y luego llame a la función SetInterval para acariciar la imagen a su vez
<script type = "text/javaScript"> var curindex = 0; VAR TimeInterval = 1000; var arr = new Array (); arr [0] = "1.png"; arr [1] = "2.png"; arr [2] = "3.png"; arr [3] = "4.png"; arr [4] = "5.png"; setInterval (ChangeImg, TimeInterval); function changeImg () {var obj = document.getElementById ("imge"); if (curindex == arr.length-1) {curindex = 0; } else {curindex += 1; } obj.src = arr [curindex]; } </script>Ejemplo completo a continuación
<! DocType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> Use matrices para lograr una imagen automática Carousel </title> <style type = "text/css"> #main {ancho: 700px; Altura: 450px; margen: 0 auto; Text-Align: Center; } </style> <script type = "text/javaScript"> var curindex = 0; VAR TimeInterval = 1000; var arr = new Array (); arr [0] = "1.png"; arr [1] = "2.png"; arr [2] = "3.png"; arr [3] = "4.png"; arr [4] = "5.png"; setInterval (ChangeImg, TimeInterval); function changeImg () {var obj = document.getElementById ("imge"); if (curindex == arr.length-1) {curindex = 0; } else {curindex += 1; } obj.src = arr [curindex]; } </script> </head> <body> <div id = "main"> <h1> Use matrices para lograr una imagen automática Carousel </h1> <img id = "imge" src = "1.png"/> </div> </body> </html>Maravilloso intercambio de temas: jQuery Picture Carousel JavaScript Picture Carousel Bootstrap Picture Carousel
Lo anterior se trata de este artículo, espero que sea útil para el aprendizaje de todos.