首页用JavaScript写一段自动循环播放的网页页面代码

用JavaScript写一段自动循环播放的网页页面代码

时间: 2023-05-28 07:07:17 浏览: 300

以下是一个简单的自动循环播放的网页页面代码： ```html <!DOCTYPE html> <html> <head> <title>自动循环播放</title> <style> #slider { width: 500px; height: 300px; margin: 0 auto; overflow: hidden; position: relative; } #slider img { width: 500px; height: 300px; position: absolute; top: 0; left: 0; } </style> </head> <body> <div id="slider"> <img src="image1.jpg"> <img src="image2.jpg"> <img src="image3.jpg"> </div> <script> var slider = document.getElementById('slider'); var images = slider.getElementsByTagName('img'); var i = 0; function nextImage() { images[i].style.display = 'none'; i = (i + 1) % images.length; images[i].style.display = 'block'; } images[i].style.display = 'block'; setInterval(nextImage, 2000); </script> </body> </html> ``` 在这个例子中，我们创建了一个包含三张图片的幻灯片，每隔两秒钟自动循环播放一次。我们使用了 JavaScript 的 setInterval() 函数来实现自动播放。每次调用 nextImage() 函数时，当前图片隐藏，接下来的图片显示。我们使用了一个简单的计数器 i 来追踪当前图片的索引。当 i 到达最后一张图片时，我们将其重置为零，以重新开始播放。

阅读全文