`

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 = "demo1.png";
images[2] = new Image();
images[2].src = "demo2.png";
images[3] = new Image();
images[3].src = "demo3.png";
images[4] = new Image();
images[4].src = "demo4.png";

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="demo1.png">
</body>
</html>

 

效果图:

 

 

  • 大小: 18 KB
0
5
分享到:
评论

相关推荐

    随机图片效果.rar

    综上所述,创建一个具有随机图片显示功能的JS特效并不复杂,主要涉及到JavaScript数组操作、随机数生成以及DOM操作。通过灵活的设计,我们可以实现一个可扩展且用户体验良好的图片相册系统。在实际应用中,可能还...

    JavaScript随机图片显示

    总的来说,JavaScript随机图片显示是一个基础但实用的功能,通过结合HTML和JavaScript,我们可以为网页创造出丰富的视觉效果。而开发工具的使用则能够提高开发效率,使得整个开发流程更加顺畅。在实际开发中,不断...

    页面图片随机浮动效果

    这种效果通常是通过JavaScript或CSS3来实现的,让图片在页面上以随机的位置和速度移动,给人一种生动的感觉。下面我们将深入探讨如何利用这两种技术来创建这种效果。 首先,我们关注CSS3的方法。CSS3引入了动画...

    JS实现页面载入时随机显示图片效果

    接下来,我们需要编写JavaScript脚本来实现随机图片的显示。在这个脚本中,我们需要创建一个图片数组,数组中的每个元素都对应一个图片资源。在创建数组元素的时候,每个数组元素都调用new Image()方法来生成一个...

    js+css3鼠标滑过图片随机切换展示效果

    在这个“js+css3鼠标滑过图片随机切换展示效果”案例中,我们不仅学习了如何利用CSS3的过渡、3D变换和动画,还了解了如何通过JavaScript来实现随机选择和动画控制。这样的技术在网页设计和开发中非常实用,能够提升...

    随机显示图片的JavaScript脚本

    在提供的链接(codefans.net)中,你可能会找到更详细的代码示例或相关资源,帮助你进一步学习和理解JavaScript随机显示图片的实现。继续探索并实践这些知识,你的JavaScript技能将不断进步。记住,不断学习和分享是...

    Javascript实现图片随机漂浮

    在这个主题“JavaScript实现图片随机漂浮”的教程中,我们将探讨如何使用JavaScript来创建一种视觉效果,使得图片在网页上随机地漂浮移动。 首先,我们需要理解HTML中的基本元素和结构。`flow.html`文件很可能是...

    原生js随机图片交换位置_点击拖动图片换位置

    本主题聚焦于一个具体的JS应用:使用原生JavaScript实现图片在页面上的随机交换位置以及点击拖动图片换位的功能。这种技术常用于创建互动式的照片墙或图像展示应用。 首先,我们要理解如何在HTML中添加图片元素。...

    可拖动换位置、随机排序的JS图片墙效果

    一个基于JavaScript技术的照片墙实例演示,使用鼠标拖动图片可为图片换位置,可随机打乱图片顺序。使用时先准备好一定序列编号的图片集,设定JavaScript代码内的路径,程序会自动读取图片,记得不要让循环溢出哦,...

    原生js当页面刷新多张图片随机显示代码

    在JavaScript(JS)编程中,实现页面刷新时多张图片随机显示的功能,主要涉及到几个核心概念:DOM操作、数组操作以及随机数生成。下面将详细解释这些知识点。 1. **DOM操作**: - DOM(Document Object Model)是...

    jQuery空格键开始随机图片抽奖代码

    【jQuery空格键开始随机图片抽奖代码】是一个利用JavaScript库jQuery实现的互动抽奖程序,它主要依赖用户按下键盘上的空格键(Space键)来触发随机选择图片的抽奖过程。这个程序的核心在于如何利用jQuery监听键盘...

    JS点击按钮图片随机排列代码.zip

    在本项目中,"JS点击按钮图片随机排列代码.zip" 提供了一个JavaScript实现的功能,当用户点击按钮时,页面上的图片会以随机顺序排列。这是一个常见的网页动态效果,常用于创建个性化、互动性强的在线相册或照片墙。...

    非常炫的javascript图片效果

    在本主题中,我们将探讨“非常炫的JavaScript图片效果”,这是一个关于利用JavaScript实现的各种吸引人的图片展示特效的集合。 首先,让我们了解JavaScript在处理图片上的基本应用。JavaScript可以用来改变图片源...

    js实现的图片切换效果

    仿照常见的那个图片变换flash做的效果,纯js。 有很多切换效果 0 : 矩形收缩转换。 1 : 矩形扩张转换。 2 : 圆形收缩转换。 3 : 圆形扩张转换。 4 : 向上擦除。 5 : 向下擦除。 6 : 向右擦除。 7 : 向左擦除...

    jquery 焦点图片随机切换效果

    jQuery 是一个广泛使用的 JavaScript 库,它简化了DOM操作、事件处理和动画效果等任务,非常适合实现焦点图片随机切换的效果。在这个项目中,我们将探讨如何使用jQuery实现这一功能。 首先,`index.html`是网站的主...

    js随机飘动的广告图片代码

    这个主题,"js随机飘动的广告图片代码",是JavaScript技术在网页交互中的应用,主要涉及到JavaScript基础、CSS样式以及DOM操作等知识点。 首先,JavaScript(简称JS)是一种轻量级的脚本语言,常用于网页和应用程序...

    javascript经典效果示例

    33:___右下角随机显示的JS图片广告 34:___向上翻动的内容切换示例 35:___图片友情链接滚动,横向,带控制按钮 36:___图片围成环形滚动,有空间感 37:___图片型不规则菜单的CSs实现 38:___图片拖拉缩放效果(仿PHOTO...

    asp随机换图片,asp刷新换图片

    然后,通过`Rnd()`函数生成一个随机索引,选取数组中的一个元素,即一张随机图片,并将其内容发送到浏览器。 `Pics`文件夹则存储了实际的图片文件,文件名可以是任意的,只要符合ASP识别的文件格式(如.jpg、.png等...

Global site tag (gtag.js) - Google Analytics