首页HBuilder中用原生JS代码for循环实现循环背景图代码

HBuilder中用原生JS代码for循环实现循环背景图代码

时间: 2024-09-15 20:11:55 浏览: 46

在HBuilder中，如果你想要使用原生JavaScript代码实现一个循环背景图片的效果，可以利用HTML5的`<img>`标签结合JavaScript来动态改变src属性。下面是一个简单的示例： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> .background-container { background-size: cover; width: 100%; height: 100vh; } </style> </head> <body> <div class="background-container" id="bgContainer"></div> <script> // 定义图片数组 var images = ['image1.jpg', 'image2.jpg', 'image3.jpg']; // 替换成实际的图片路径 // 获取背景容器元素 var bgElement = document.getElementById('bgContainer'); // 设置初始背景图片 bgElement.style.backgroundImage = "url('" + images[0] + "')"; // 循环背景图片 function loopBackground() { for (let i = 0; i <= images.length - 1; i++) { // 使用for循环从0到数组长度减一 setTimeout(function() { bgElement.style.backgroundImage = "url('" + images[i % images.length] + "')"; // 每次更新用当前索引对数组长度取模，实现循环效果 i++; }, i * 2000); // 每张图片间隔显示的时间，这里设为2秒（毫秒） } } // 开始背景图片轮播 loopBackground(); </script> </body> </html> ``` 在这个例子中，我们创建了一个定时器，每两秒钟切换一次图片，通过`%`运算符实现了图片的无限循环滚动。

阅读全文