巧用HTML在HBuilderX中获取并显示img文件夹所有图片

你可以使用以下的HTML代码来获取img文件夹中的所有图片并显示在网页中： ```html <!DOCTYPE html> <html> <head> <title>Display Images</title> </head> <body> <h1>Image Gallery</h1> <div id="image-gallery"></div> <script> // 获取img文件夹的URL var imgFolder = "img/"; // 获取image-gallery元素 var gallery = document.getElementById("image-gallery"); // 使用JavaScript动态创建并显示图片 function showImages() { var images = []; // 循环获取img文件夹中的所有图片 for (var i = 1; i <= 10; i++) { images.push(imgFolder + "image" + i + ".jpg"); } images.forEach(function(image) { // 创建一个图片元素 var imgElement = document.createElement("img"); // 设置图片的src属性为图片的URL imgElement.src = image; // 将图片元素添加到image-gallery元素中 gallery.appendChild(imgElement); }); } // 页面加载完成后调用showImages函数 window.onload = showImages; </script> </body> </html> ``` 请记得将`img/`更改为你实际的img文件夹的路径。这段代码将循环获取`img`文件夹中名为`image1.jpg`到`image10.jpg`的图片，并在`image-gallery`的`<div>`元素中显示这些图片。 ######[AI写代码神器 | 791点数解答 | 2024-06-24 04:46:05]

服务商

更多选项

快捷项

自定义