Existem muitas maneiras de carrossel a imagem. Aqui está uma implementação simples: JS Array.
Primeiro guarde o caminho da imagem na matriz e depois chama a função setInterval para carrossel a imagem por sua 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); função alteração de alteração () {var obj = document.getElementById ("imge"); if (Curindex == arr.Length-1) {Curindex = 0; } else {Curindex += 1; } obj.src = arr [Curindex]; } </script>Exemplo completo abaixo
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> use matrizes para alcançar a imagem automática Carousel </ititle> <style type = "text/css"> #main {width: 700px; Altura: 450px; margem: 0 automático; Alinhamento de texto: centro; } </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); função alteração de alteração () {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 matrizes para obter um carrossel de imagem automática </h1> <img id = "imge" src = "1.png"/> </div> </body> </html>Maravilhoso compartilhamento de tópicos: jQuery Picture Carousel JavaScript Imagem Carousel Bootstrap Picture Carousel
O exposto acima é tudo sobre este artigo, espero que seja útil para o aprendizado de todos.