JS实现页面载入时随机显示图片效果


Posted in Javascript onSeptember 07, 2016

本文实例讲述了JS实现页面载入时随机显示图片效果。分享给大家供大家参考,具体如下:

<html>
<head>
<title>JS 随机图片效果</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
<!--
img { border: #999999; border-style: dotted; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}
-->
</style>
</head>
<SCRIPT LANGUAGE="JavaScript">
var rand1 = 0;
var useRand = 0;
images = new Array;
images[1] = new Image();
images[1].src = "img/a1.jpg";
images[2] = new Image();
images[2].src = "img/a2.jpg";
images[3] = new Image();
images[3].src = "img/a3.jpg";
images[4] = new Image();
images[4].src = "img/a4.jpg";
function swapPic() {
var imgnum = images.length - 1;
do {
var randnum = Math.random();
rand1 = Math.round((imgnum - 1) * randnum) + 1;
} while (rand1 == useRand);
useRand = rand1;
document.randimg.src = images[useRand].src;
}
</script>
<body bgcolor="#FFFFFF" text="#000000" OnLoad="swapPic()">
<img name="randimg" src="img/a1.jpg">
</body>
</html>

代码经测试可以正常运行。这里就不再配上运行效果图了,感兴趣的朋友可以挑几张美女图片测试一下看看效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
清华大学出版的事半功倍系列 javascript全部源代码
May 04 Javascript
javascript setTimeout和setInterval 的区别
Dec 08 Javascript
红米手机抢购的js代码
Mar 10 Javascript
jQuery基于当前元素进行下一步的遍历
May 20 Javascript
javascript学习笔记(四)function函数部分
Sep 30 Javascript
jQuery实现文本框邮箱输入自动补全效果
Nov 17 Javascript
基于jquery实现图片相关操作(重绘、获取尺寸、调整大小、缩放)
Dec 25 Javascript
javascript实现简单的on事件绑定
Aug 23 Javascript
如何解决IONIC页面底部被遮住无法向上滚动问题
Sep 06 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
Nov 27 Javascript
微信小程序中插入激励视频广告并获取收益(实例代码)
Dec 06 Javascript
Threejs实现滴滴官网首页地球动画功能
Jul 13 Javascript
JS简单实现浮动窗口效果示例
Sep 07 #Javascript
利用Javascript仿Excel的数据透视分析功能
Sep 07 #Javascript
Vue.js快速入门教程
Sep 07 #Javascript
jQuery实现简洁的轮播图效果实例
Sep 07 #Javascript
Vue.js每天必学之内部响应式原理探究
Sep 07 #Javascript
在JavaScript中调用Java类和接口的方法
Sep 07 #Javascript
Vue.js每天必学之指令系统与自定义指令
Sep 07 #Javascript
You might like
php中ftp_chdir与ftp_cdup函数用法
2014/11/18 PHP
PHP版本如何选择?应该使用哪个版本?
2015/05/13 PHP
laravel 事件/监听器实例代码
2019/04/12 PHP
js 图片等比例缩放代码
2010/05/13 Javascript
JS中判断null、undefined与NaN的方法
2014/03/24 Javascript
jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法
2015/11/27 Javascript
基于RequireJS和JQuery的模块化编程——常见问题全面解析
2016/04/14 Javascript
JS验证逗号隔开可以是中文字母数字
2016/04/22 Javascript
Angularjs单选框相关的示例代码
2017/08/17 Javascript
微信小程序支付功能 php后台对接完整代码分享
2018/06/12 Javascript
详解从NodeJS搭建中间层再谈前后端分离
2018/11/13 NodeJs
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
2019/05/05 Javascript
node.js中module模块的功能理解与用法实例分析
2020/02/14 Javascript
python实现在字符串中查找子字符串的方法
2015/07/11 Python
python下调用pytesseract识别某网站验证码的实现方法
2016/06/06 Python
老生常谈Python进阶之装饰器
2017/05/11 Python
python判断字符串是否是json格式方法分享
2017/11/07 Python
Python数据结构与算法之图的广度优先与深度优先搜索算法示例
2017/12/14 Python
Django rest framework基本介绍与代码示例
2018/01/26 Python
pandas DataFrame 根据多列的值做判断,生成新的列值实例
2018/05/18 Python
python selenium 获取标签的属性值、内容、状态方法
2018/06/22 Python
对Python协程之异步同步的区别详解
2019/02/19 Python
python程序中的线程操作 concurrent模块使用详解
2019/09/23 Python
python上传时包含boundary时的解决方法
2020/04/08 Python
canvas与html5实现视频截图功能示例
2016/12/15 HTML / CSS
硕士研究生自我鉴定
2013/11/08 职场文书
生产部经理岗位职责
2013/12/16 职场文书
电脑销售顾问自荐信
2014/01/29 职场文书
酒店员工培训方案
2014/06/02 职场文书
人事行政专员岗位职责
2014/07/23 职场文书
无财产无子女离婚协议书范文
2014/09/14 职场文书
灵山大佛导游词
2015/02/04 职场文书
七一活动主持词
2015/06/29 职场文书
Python使用Kubernetes API访问集群
2021/05/30 Python
SpringBoot生成License的实现示例
2021/06/16 Java/Android
简单介绍Python的第三方库yaml
2021/06/18 Python