JavaScript 实现点击图片随机切换图片

作者:纸飞机

时间:2026-10-28

浏览:164

本文提供一段 JavaScript 代码,演示如何通过点击鼠标事件实现图片的随机切换。代码包含图片数组定义、随机数生成及 DOM 操作,适合前端开发参考。

文章目录

JavaScript 实现点击图片随机切换图片

本文介绍了一种利用 JavaScript 实现点击鼠标后随机更换图片的功能。以下是具体的代码实现方案,供读者参考学习。


<html>
<title>鼠标点击图片即可随机变换图片</title>
<body bgcolor="#fef4d9" OnLoad="swapPic()">
<center>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var rand1 = 0;
var useRand = 0;
images = new Array;
images[1] = new Image();
images[1].src = "images/m01.jpg";
images[2] = new Image();
images[2].src = "images/m02.jpg";
images[3] = new Image();
images[3].src = "images/m03.jpg";
images[4] = new Image();
images[4].src = "images/m04.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;
}
// End -->
</script>
<a onClick="swapPic();">
<img name="randimg" src="images/m09.jpg">
</a>
<br>
<font face="Verdana" size="-2">click image to change
</center>
</body>
</html>

希望这段代码示例能对从事 JavaScript 编程的用户有所帮助。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章