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

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

时间: 2023-05-28 15:06:38 浏览: 247

以下是一段自动循环播放的网页图片代码，使用JavaScript实现： ```html <!DOCTYPE html> <html> <head> <title>自动循环播放图片</title> <style type="text/css"> img { width: 400px; height: 300px; } </style> </head> <body> <img id="img" src="image1.jpg"> <script type="text/javascript"> // 定义图片数组 var images = ["image1.jpg", "image2.jpg", "image3.jpg"]; // 定义当前图片索引 var currentIndex = 0; // 定义函数，用于循环播放图片 function loopImages() { // 更改图片src属性为当前索引指向的图片 document.getElementById("img").src = images[currentIndex]; // 将当前索引指向下一张图片 currentIndex++; // 如果当前索引大于等于图片数组的长度，将索引重置为0 if (currentIndex >= images.length) { currentIndex = 0; } // 设置定时器，每3秒调用一次loopImages函数 setTimeout(loopImages, 3000); } // 调用函数，开始循环播放图片 loopImages(); </script> </body> </html> ``` 该代码通过定义一个图片数组和当前图片索引来实现循环播放图片，利用setTimeout函数定时调用loopImages函数，每次调用时将当前索引指向下一张图片，并将图片的src属性更改为当前索引指向的图片。如果当前索引大于等于图片数组的长度，则将索引重置为0，从而实现循环播放的效果。

阅读全文