Il existe de nombreuses façons de stimuler l'image. En voici une simple: la mise en œuvre du tableau JS.
Conservez d'abord le chemin d'image dans le tableau, puis appelez la fonction SetInterval pour carrousel à son tour l'image
<script type = "text / javascript"> var cinUNDEX = 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 [curintex]; } </ script>Exemple complet ci-dessous
<! Doctype html> <html lang = "en"> <éadf> <meta charset = "utf-8"> <tight> Utilisez des tableaux pour réaliser un carrousel d'image automatique </title> <style type = "text / css"> #main {width: 700px; hauteur: 450px; marge: 0 auto; Texte-aligne: Centre; } </ style> <script type = "text / javascript"> var curintex = 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 [curintex]; } </ script> </ head> <body> <div id = "main"> <h1> Utilisez des tableaux pour réaliser un carrousel d'image automatique </h1> <img id = "imge" src = "1.png" /> </div> </ body> </html>Merveilleux sujet Partage: JQUERY Picture Carrousel Javascript Picture Carrousel Bootstrap Picture Carrousel
Ce qui précède concerne cet article, j'espère qu'il sera utile à l'apprentissage de tout le monde.