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下IE与FF兼容函数收集
Sep 17 Javascript
google地图的路线实现代码
Aug 20 Javascript
angularJS 入门基础
Feb 09 Javascript
js 轮播效果实例分享
Dec 28 Javascript
loading动画特效小结
Jan 22 Javascript
Vue动态组件实例解析
Aug 20 Javascript
深入理解ES7的async/await的用法
Sep 09 Javascript
轻量级JS Cookie插件js-cookie的使用方法
Mar 22 Javascript
angularJS1 url中携带参数的获取方法
Oct 09 Javascript
Vue表情输入组件 微信face表情组件
Feb 11 Javascript
vue轮播组件实现$children和$parent 附带好用的gif录制工具
Sep 26 Javascript
js 获取本周、上周、本月、上月、本季度、上季度的开始结束日期
Feb 01 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 session 错误
2009/05/21 PHP
关于PHP结束标签的使用细节探讨及联想
2013/03/04 PHP
为百度UE编辑器上传图片添加水印功能
2015/04/16 PHP
PHP生成随机字符串(3种方法)
2015/09/25 PHP
PHP 中TP5 Request 请求对象的实例详解
2017/07/31 PHP
PHP实现压缩图片尺寸并转为jpg格式的方法示例
2018/05/10 PHP
javascript function、指针及内置对象
2009/02/19 Javascript
表单JS弹出填写提示效果代码
2011/04/16 Javascript
一个简单的瀑布流效果(主体形式自写)
2013/05/27 Javascript
js实现文本框中焦点在最后位置
2014/03/04 Javascript
JS、DOM和JQuery之间的关系示例分析
2014/04/09 Javascript
a标签的href与onclick事件的区别详解
2014/11/12 Javascript
node.js学习之交互式解释器REPL详解
2016/12/08 Javascript
浅谈Vue Element中Select下拉框选取值的问题
2018/03/01 Javascript
用npm安装vue和vue-cli,并使用webpack创建项目的方法
2018/09/28 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
2019/06/10 jQuery
layui下拉框获取下拉值(select)的例子
2019/09/10 Javascript
[51:17]Mski vs VGJ.S Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
Python中apply函数的用法实例教程
2014/07/31 Python
python基础教程之缩进介绍
2014/08/29 Python
在Python中使用成员运算符的示例
2015/05/13 Python
python django事务transaction源码分析详解
2017/03/17 Python
Numpy数组转置的两种实现方法
2018/04/17 Python
Python中的取模运算方法
2018/11/10 Python
Python3实现对列表按元组指定列进行排序的方法分析
2018/12/22 Python
对python周期性定时器的示例详解
2019/02/19 Python
浅谈css3新单位vw、vh、vmin、vmax的使用详解
2017/12/01 HTML / CSS
英国第一豪华护肤品牌:Elemis
2017/10/12 全球购物
Audible英国:有声读物,30天免费试用
2019/10/16 全球购物
The Outnet亚太地区:折扣设计师时装店
2019/12/05 全球购物
人事任命书范文
2014/06/04 职场文书
教师个人事迹材料
2014/12/17 职场文书
汽车销售助理岗位职责
2015/04/14 职场文书
2015年大学生党员承诺书
2015/04/27 职场文书
学生检讨书怎么写
2015/05/07 职场文书
开业庆典致辞
2015/08/01 职场文书