javascript实现随机显示图片

最新推荐文章于 2022-03-24 23:54:09 发布
最新推荐文章于 2022-03-24 23:54:09 发布
阅读量3.6k 收藏 12
点赞数
分类专栏： JS 文章标签： 随机图片
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/GLyihu/article/details/102728419
版权
这篇博客介绍了如何使用JavaScript在网页中实现图片的随机加载。通过`window.onload`事件和`Math.random()`函数，动态改变`img`标签的`src`属性，从而达到随机展示指定数组内图片的效果。
摘要由CSDN通过智能技术生成

js部分

window.onload = choosePic;
function choosePic() {
    var myPix = new Array("images/lion.jpg","images/tiger.jpg","images/bear.jpg");
    var randomNum = Math.floor((Math.random() * myPix.length));
    document.getElementById("myPicture").src = myPix[randomNum];
}

img部分

<img id="myPicture" src="images/lion.jpg"/>

GLyihu
关注
专栏目录
Javascript实现随机显示图片(附完整源码)
希望我的博客，能帮上你解决学习中工作中所遇到的问题
11-05 498
Javascript实现随机显示图片(附完整源码)
JS实现页面载入时随机显示图片效果
10-21
主要介绍了JS实现页面载入时随机显示图片效果,涉及javascript基于随机数与数组的页面元素动态修改相关操作技巧,需要的朋友可以参考下
！JS实战之随机像素图
weixin_30847865的博客
03-16 206
JavaScript实例分享之----画随机像素图。随机像素图（作者自己取得名字）指的是一张图片上每一个像素的颜色都是随机的。此时应该能联想到这幅图多么眼花缭乱，好吧，我们用JS来实现它的原因是JS很方便，而且自带了一个canvas（画布）API，比较实用。 好，先上成果，为了避免XSS攻击的怀疑，代码我将以图片的形式公布： 然后效果如图： 看到了吧，短短12行JS代码成就了一幅十分...
JavaScript 随机显示照片
唯唯同学
07-19 3416
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script type="text/javascript"> var x_left = 0; var x_right = 0; var y_top = 0; var y_bottom =
JavaScript随机显示图片
zhangwei10php的专栏
02-28 508
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml">> 无标题文档 div{  position:absolute;}  var img=document.getElementById("imgs");  var yan=t
JavaScript实现随机替换图片的方法
10-24
JavaScript是一种广泛用于网页开发的脚本...总之，通过JavaScript实现随机替换图片是一个简单的技术实现，但其中涉及的技术点和细节处理需要注意，以确保最终效果满足设计要求，同时也保证了网页的加载性能和用户体验。
javascript实现随机显示星星特效
10-22
在这个实例中，我们将探讨如何使用JavaScript实现一个随机显示星星的特效，这个特效使得网页背景黑暗，星星以不同的大小随机出现在屏幕各处，点击星星后它们会消失。 首先，为了实现这个特效，我们需要定义一些全局...
javascript随机显示背景图片的方法
10-24
在实现随机显示背景图片的功能中，JavaScript将被用来编写函数，生成随机数，并且通过操作DOM来改变页面样式。 数组是JavaScript中一个非常常用的数据结构，用于存储一系列的值。在我们的例子中，数组被用来存储...
JavaScript随机图片显示
07-27
NULL 博文链接：https://shanshandaocao-163-com.iteye.com/blog/752765
随机显示图片的JavaScript脚本
05-12
内容索引:脚本资源,Ajax/JavaScript,随机图片　　这个代码觉得不错哦，可以随机显示图片的JavaScript脚本，在网页上的一行图片中，每次刷新网页显示的图片会不一样，而且文字内容也会做相应变化，这样可提高网站浏览率，以切换不同的内容。
JavaScript 右下角随机显示的JS图片广告.rar
12-11
JavaScript 右下角随机显示的JS图片广告.rar
JS随机显示一张图片
weixin_33698043的博客
06-08 1611
var images=['p1.jpg','p2.jpg','p3.jpg']; var url=images[Math.floor(Math.random()*images.length)]; console.log(url);
JS实现的随机显示图片
weixin_30790841的博客
12-05 1458
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 2 "http://www.w3.org/TR/xhtml1/TDT/xhtml1-strit.dtd"> 3 <html> 4 <head> 5 <meta http-equiv="Content-Type" con...
js 随机生成图片
cxc199459的博客
09-03 1072
这次给大家分享一个通过js向HTML添加便签，实现随机代码生成的案例，代码已经放在下方， 这里我在下面准备了50张图片，但是没有放在博文中，如果读者想要练习，可以自己下载一些图片，建议下载的多一些。 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, in.
利用JS随机显示一张有序图片
weixin_34308389的博客
08-25 214
2019独角兽企业重金招聘Python工程师标准>>> ...
JavaScript(webAPI)【点击图片/按钮随机显示图片】
Coding
03-24 2410
JavaScript(webAPI)【点击图片/按钮随机显示图片】
html随机显示图片
最新发布
05-25
可以使用JavaScript来实现HTML随机显示图片的效果。以下是一个简单的示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>随机显示图片</title> </head> <body> <img id="random-image" src=""> <script> var images = ["img1.jpg", "img2.jpg", "img3.jpg", "img4.jpg"]; // 图片数组 var randomIndex = Math.floor(Math.random() * images.length); // 随机生成一个索引 var randomImage = images[randomIndex]; // 获取随机图片的路径 document.getElementById("random-image").src = randomImage; // 在页面中显示随机图片 </script> </body> </html> ``` 你可以将上述代码保存为一个 HTML 文件并在浏览器中打开，就可以看到随机显示图片的效果。注意，需要将图片放置在同一目录下，并将其文件名更新到 `images` 数组中。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值