JavaScript实现随机图片

里克贝斯

发布于 2021-05-21 15:30:05

4.2K0

发布于 2021-05-21 15:30:05

在很多网站中，有很多顶部特色图像，每次进入时图像显示的都不一样，即实现图片随机展示。仔细分析一下可知，改特效实现的原理应该是在HTML中嵌入JavaScript代码，将图片地址存入数组，然后通过随机数产生随机索引，再调用写入函数，这样就可以随机化图片。

这篇文章主要介绍了JS实现页面载入时随机显示图片效果,涉及javascript基于随机数与数组的页面元素动态修改相关操作技巧,需要的朋友可以参考下。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript">
    //<!CDATA[
    var pic = [];
    pic[0] = "https://www.omegaxyz.com/wp-content/uploads/2018/06/new.jpg";
    pic[1] = "https://www.omegaxyz.com/wp-content/uploads/2018/01/tensorflow.jpg";
    pic[2] = "https://www.omegaxyz.com/wp-content/uploads/2017/06/htmlandcss.jpg";
    pic[3] = "https://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语句。

复制上述代码并点击下方的链接测试一下：