JavaScript实现随机背景图片切换的完整代码示例

作者:页面旅途时间:2026-10-22 09:50:12浏览:504

本文提供使用JavaScript实现网页背景图片随机切换的完整代码示例。通过定义图片数组,利用Math.random()生成随机索引,并动态修改document.body.style.backgroundImage属性,实现页面加载时自动切换背景。代码包含初始化设置与定时器逻辑,适用于前端开发中的简单视觉交互需求。

JavaScript随机背景图片切换实现

具体实现代码如下:


<script>
 
var imgs =["http://images.cnblogs.com/cnblogs_com/xiaobo-Linux/1112236/o_2.jpg",
       "http://images.cnblogs.com/cnblogs_com/xiaobo-Linux/1112236/o_default.png",
       "http://images.cnblogs.com/cnblogs_com/xiaobo-Linux/1112236/o_3.jpg",
       "http://images.cnblogs.com/cnblogs_com/xiaobo-Linux/1112236/o_1.jpg",
       "http://images.cnblogs.com/cnblogs_com/xiaobo-Linux/1112236/o_4.jpg",
       "http://images.cnblogs.com/cnblogs_com/xiaobo-Linux/1112236/o_5.jpg",
       "http://images.cnblogs.com/cnblogs_com/xiaobo-Linux/1112236/o_6.jpg",
       "http://images.cnblogs.com/cnblogs_com/xiaobo-Linux/1112236/o_default-2.jpg",
       ];  
 
var index=Math.floor(Math.random()*8);
var img = imgs[index];
    function time(){
        
       document.body.style.backgroundImage="url("+img+")";
        
    }  
 
document.body.onload = function(){
 time();
}
</script>

上述内容即为JavaScript实现背景图片随机切换的完整示例,供开发者参考使用。

作者最新文章