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实现背景图片随机切换的完整示例,供开发者参考使用。
作者最新文章
JS监听滚动事件:回到顶部按钮的显示与隐藏逻辑
2026-11-05 16:19:37
JavaScript怎么读写LocalStorage与SessionStorage
2026-11-05 15:40:11
anime.js 与 GSAP 对比:轻量级项目该怎么选择动画库
2026-11-05 11:24:55
flv.js 与 hls.js 在直播场景下的选型对比
2026-11-05 08:18:52
JavaScript能做什么?前端开发中的作用与应用场景解析
2026-11-04 23:17:54
