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 相关文章推荐
使用JS进行目录上传(相当于批量上传)
Dec 05 Javascript
jQuery EasyUI API 中文文档 DateTimeBox日期时间框
Oct 16 Javascript
JavaScript学习笔记之定时器
Jan 22 Javascript
JQuery页面地址处理插件jqURL详解
May 03 Javascript
利用Bootstrap实现表格复选框checkbox全选
Dec 21 Javascript
js仿搜狐视频记录片列表展示效果
May 30 Javascript
浅谈jQuery中的$.extend方法来扩展JSON对象
Feb 12 Javascript
vue.js select下拉框绑定和取值方法
Mar 03 Javascript
angular实现input输入监听的示例
Aug 31 Javascript
详解vue2.6插槽更新v-slot用法总结
Mar 09 Javascript
vue里的data要用return返回的原因浅析
May 28 Javascript
JS实现悬浮球只在一侧滑动并且是横屏状态下
Aug 19 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
The specified CGI application misbehaved by not returning a complete set of HTTP headers
2011/03/31 PHP
延时重复执行函数 lLoopRun.js
2007/05/08 Javascript
javascript之卸载鼠标事件的代码
2007/05/14 Javascript
JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)
2011/07/04 Javascript
JavaScript打开word文档的实现代码(c#)
2012/04/16 Javascript
document.getElementById获取控件对象为空的解决方法
2013/11/20 Javascript
NodeJS学习笔记之Connect中间件模块(二)
2015/01/27 NodeJs
javascript手工制作悬浮菜单
2015/02/12 Javascript
在javascript中随机数 math random如何生成指定范围数值的随机数
2015/10/21 Javascript
js在ie下打开对话窗口的方法小结
2016/10/24 Javascript
JavaScript基于DOM操作实现简单的数学运算功能示例
2017/01/16 Javascript
浅谈js中startsWith 函数不能在任何浏览器兼容的问题
2017/03/01 Javascript
bootstrap时间控件daterangepicker使用方法及各种小bug修复
2017/10/25 Javascript
浅析Vue 生命周期
2018/06/21 Javascript
微信小程序实现文字无限轮播效果
2018/12/28 Javascript
JS正则表达式常见函数与用法小结
2020/04/13 Javascript
Python urlopen()函数 示例分享
2014/06/12 Python
基于Python的XSS测试工具XSStrike使用方法
2017/07/29 Python
pygame实现打字游戏
2021/02/19 Python
python Zmail模块简介与使用示例
2020/12/19 Python
python matplotlib工具栏源码探析三之添加、删除自定义工具项的案例详解
2021/02/25 Python
CSS实现定位元素居中的方法
2015/06/23 HTML / CSS
字中字效果的实现【html5实例】
2016/05/03 HTML / CSS
NICKIS.com荷兰:设计师儿童时装
2020/01/08 全球购物
Pamela Love官网:纽约设计师Pamela Love的精美、时尚和穿孔珠宝
2020/10/19 全球购物
XMLHttpRequest对象在IE和Firefox中创建方式有没有不同
2016/03/23 面试题
咖啡厅创业计划书范本
2014/01/22 职场文书
优秀干部获奖感言
2014/01/31 职场文书
商场消防演习方案
2014/02/12 职场文书
局机关干部群众路线个人对照检查材料思想汇报
2014/10/05 职场文书
2015年度销售个人工作总结
2015/03/31 职场文书
2015年中秋晚会主持词
2015/07/01 职场文书
素质拓展训练感想
2015/08/07 职场文书
2016庆祝教师节新闻稿
2015/11/25 职场文书
Nginx反向代理至go-fastdfs案例讲解
2021/08/02 Servers
Windows server 2022创建创建林、域树、子域的步骤
2022/06/25 Servers