在很多网站中，有很多顶部特色图像，每次进入时图像显示的都不一样，即实现图片随机展示。仔细分析一下可知，改特效实现的原理应该是在HTML中嵌入JavaScript代码，将图片地址存入数组，然后通过随机数产生随机索引，再调用写入函数，这样就可以随机化图片。
这篇文章主要介绍了JS实现页面载入时随机显示图片效果,涉及javascript基于随机数与数组的页面元素动态修改相关操作技巧,需要的朋友可以参考下。
代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script type="text/javascript"> //<!CDATA[ var pic = []; pic[0] = "http://www.omegaxyz.com/wp-content/uploads/2018/06/new.jpg"; pic[1] = "http://www.omegaxyz.com/wp-content/uploads/2018/01/tensorflow.jpg"; pic[2] = "http://www.omegaxyz.com/wp-content/uploads/2017/06/htmlandcss.jpg"; pic[3] = "http://www.omegaxyz.com/wp-content/uploads/2018/07/tbp.jpg"; var randomBgIndex = Math.round( Math.random() * 3 ); //输出随机的背景图 //document.write('<style>body{background:url(' + bodyBgs[randomBgIndex] + ') no-repeat 50% 0}</style>'); document.write("<img src=" + pic[randomBgIndex] + " width='400'>") //]]> </script> </body> </html> |
注意这里用document.write()函数写HTML语句。
复制上述代码并点击下方的链接测试一下：
