手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >JS实现页面载入时随机显示图片效果
JS实现页面载入时随机显示图片效果
摘要:本文实例讲述了JS实现页面载入时随机显示图片效果。分享给大家供大家参考,具体如下:JS随机图片效果varrand1=0;varuseRand...

本文实例讲述了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程序设计有所帮助。

【JS实现页面载入时随机显示图片效果】相关文章:

jQuery实现页面内锚点平滑跳转特效的方法总结

JS实现模拟风力的雪花飘落效果

js兼容火狐显示上传图片预览效果的方法

JS函数实现鼠标指向图片后显示大图代码

js实现精美的图片跟随鼠标效果实例

Javascript特效:随机显示图片的源代码

JavaScript实现列表分页功能特效

jQuery实现文本展开收缩特效

jQuery实现表格行上下移动和置顶效果

jQuery实现首页图片淡入淡出效果的方法

精品推荐
分类导航