<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>图片轮播</title> <style> .wrapper { margin: 0; padding: 0; } img { width: 100%; height: auto; } ul { position: relative; } li { position: absolute; width: 500px; list-style: none; } </style> </head> <body> <div class="wrapper"> <ul> <li><img src="img/1.png"></li> </ul> </div> <script> var img = ['1.png', '2.png', '3.png']; var i = 0; var t; function change() { clearInterval(t); if (i > img.length - 1) { i = 0; } document.images[0].src = 'img/' + img[i]; console.log(document.images.length) i++; t = setInterval('change()', 1000); } change(); </script> </body> </html>