There are many ways to carousel the picture. Here is a simple one: js array implementation.
First store the image path in the array, and then call the setInterval function to carousel the image in turn
<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>Complete example below
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Use arrays to achieve automatic image carousel</title> <style type="text/css"> #main{ width: 700px; height: 450px; margin: 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 arrays to achieve automatic image carousel</h1> <img id = "imge" src = "1.png" /> </div></body> </html>Wonderful topic sharing: jQuery picture carousel JavaScript picture carousel Bootstrap picture carousel
The above is all about this article, I hope it will be helpful to everyone's learning.