js实现网页随机切换背景图片的方法
更新时间：2014年11月01日 09:26:24 投稿：shichen2014
这篇文章主要介绍了js实现网页随机切换背景图片的方法,涉及数组、随机函数与css样式的调用技巧,非常具有实用价值,需要的朋友可以参考下
本文实例讲述了js实现网页随机切换背景图片的方法。分享给大家供大家参考。具体实现方法如下：
首先要准备一些图像，图像的大小（无论是尺寸大小还是数据大小）要控制好，如果太大，会使用户等不及查看全图就跳出了，如果太小，又会影响页面质量
在script中将这些图像编为一个数组，便于调用。数组的长度当然就是图像的数量。
复制代码 代码如下:
var bodyBgs = []; //创建一个数组变量来存储背景图片的路径
bodyBgs[0] = "images/01.jpg";
bodyBgs[1] = "images/02.jpg";
bodyBgs[2] = "images/03.jpg";
bodyBgs[3] = "images/04.jpg";
bodyBgs[4] = "images/05.jpg";
bodyBgs[0] = "images/01.jpg";
bodyBgs[1] = "images/02.jpg";
bodyBgs[2] = "images/03.jpg";
bodyBgs[3] = "images/04.jpg";
bodyBgs[4] = "images/05.jpg";
因为上面用到了5个图像，所以在这里需要产生一个0到4的随机数。如果数组长度不一样，修改下面代码中的乘数就可以。
复制代码 代码如下:
var randomBgIndex = Math.round( Math.random() * 4 );
核心的程序就是这些。尽管很简单，却是一种小小的思路，若以此为基础，通过加工可以做出一些扩展功能。比如：主题切换以及其它的随机呈现等等。下面是完整的JS代码。
复制代码 代码如下:
<script type="text/javascript">
//<!CDATA[
var bodyBgs = [];
bodyBgs[0] = "images/01.jpg";
bodyBgs[1] = "images/02.jpg";
bodyBgs[2] = "images/03.jpg";
bodyBgs[3] = "images/04.jpg";
bodyBgs[4] = "images/05.jpg";
var randomBgIndex = Math.round( Math.random() * 4 );
//输出随机的背景图
document.write('<style>body{background:url(' + bodyBgs[randomBgIndex] + ') no-repeat 50% 0}</style>');
//]]>
</script>
//<!CDATA[
var bodyBgs = [];
bodyBgs[0] = "images/01.jpg";
bodyBgs[1] = "images/02.jpg";
bodyBgs[2] = "images/03.jpg";
bodyBgs[3] = "images/04.jpg";
bodyBgs[4] = "images/05.jpg";
var randomBgIndex = Math.round( Math.random() * 4 );
//输出随机的背景图
document.write('<style>body{background:url(' + bodyBgs[randomBgIndex] + ') no-repeat 50% 0}</style>');
//]]>
</script>
希望本文所述对大家基于javascript的web程序设计有所帮助。
相关文章
非常酷的javascript拖动分页功能，无缝循环分页，拖动鼠标即可完成分页，鼠标向左拖动回到前一页，向右拖动则翻开第二页，还带有动画特效，着实很不错，界面黑色，非主流风格，相信很多人会喜欢的。2015-05-05
在Web开发中,处理日期和时间是常见的需求之一,特别是在金融、人力资源等领域,经常需要计算特定的日期范围或工作日,本文将深入探讨如何使用JavaScript计算当前时间前N个工作日,并提供详细的代码示例和实际开发中的技巧,需要的朋友可以参考下2025-02-02
这篇文章主要给大家介绍了关于前端项目部署后如何提示用户版本更新的相关资料,文中通过代码介绍的非常详细,对大家的工作或者学习具有一定的参考借鉴价值,需要的朋友可以参考下2024-03-03
本文主要介绍了JavaScript获取URL参数的方法。具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
图片轮播效果在Web中常常能看到，很多人也称之为幻灯片。这篇文章主要给大家介绍Bootstrap carousel轮转图的使用实例详解，需要的朋友可以参考下2016-05-05
本文通过实例代码给大家介绍了微信小程序的注册页面包含倒计时验证码、获取用户信息的相关知识，本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下2019-05-05
undefined==null引发的两者区别与联系2007-12-12
JavaScript中call、apply、bind实现原理详解
其实在很多文章都会写call，apply，bind,但个人觉着如果不弄懂原理,是很难理解透的,所以这篇文章主要介绍了JavaScript中call、apply、bind实现原理的相关资料,需要的朋友可以参考下2021-06-06
这篇文章主要介绍了JavaScript中return用法,结合实例形式简单分析了javascript中return语句的功能与使用技巧,需要的朋友可以参考下2016-11-11
String 的扩展方法集合，可以是javascript对string的功能更多2008-06-06
最新评论