<div style="position:absolute;left:40%;top:10%;border-style:dotted">
<img src="ejb.jpg"/><br/>
<input type="button" value="随机选择人物"/>
<input type="button" value="暂停"/>
</div>
<script type="text/javascript">
//创建一个数组
var paths = new Array();
var isExecute = true;
var count=0;
window.onload = function(){
//将N张图片的路径放入数组中
paths[0]="ejb.jpg";
paths[1]="j2ee.jpg";
paths[2]="java.gif";
paths[3]="javamail.gif";
}
//随机选择人物
document.getElementsByTagName("input")[0].onclick=function(){
window.setInterval("changeImage()",500);
isExecute=true;
}
//换图片
function changeImage(){
if(isExecute){
//随机选取一张图片
var path = getPath();
//动态修改图片的src属性值
var imgElement = document.images[0];
imgElement.src = path;
}
}
//随机选中一张图片的路径
function getPath(){
//随机获取0,1,2中的任何一个型值
var index = Math.floor(Math.random()*4);
count=count+1>3?0:count+1;
return paths[count];
//return paths[index];
}
//暂停
document.getElementsByTagName("input")[1].onclick=function(){
isExecute = false;
}
</script>

js 随机变换图片的更多相关文章

  1. js随机显示图片

    定义一个图片数组,生成一个随机数对应数据索引. window.onload = choosePic; function choosePic() { var myPix = new Array(&quo ...

  2. 随机漂浮图片、右侧上下浮动快捷栏JS

    随机漂浮图片JS: //公共脚本文件 main.js function addEvent(obj,evtType,func,cap){ cap=cap||false; if(obj.addEventL ...

  3. JS实现鼠标移入DIV随机变换颜色

    今天分享一个在 JavaScript中,实现一个鼠标移入可以随机变换颜色,本质就是js的随机数运用. 代码如下: <!DOCTYPE html> <html> <head ...

  4. JS实现的随机显示图片

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  5. 完整说明使用SpringBoot+js实现滑动图片验证

    常见的网站验证方式有手机短信验证,图片字符验证,滑块验证,滑块图片验证.本文主要讲解的是滑块图片验证的实现流程.包括后台和前端的实现. 实现效果 使用的API java.awt.image.Buffe ...

  6. js 随机星星 document.createElement(); setAttribute()

    js 随机星星 document.createElement(); setAttribute() <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...

  7. 随机获取图片的api接口

    http://lorempixel.com/1600/900 https://unsplash.it/1600/900?random(国内加载略慢) https://uploadbeta.com/ap ...

  8. 原生js如何实现图片翻转旋转效果?

    原生js如何实现图片翻转旋转效果? 一.总结 1.通过给元素设置style中的transition来实现的. 2.我昨天纠结的效果全部可以通过精读这个代码后实现. 二.原生js如何实现图片翻转旋转效果 ...

  9. js多种切换图片

    分享通过js实现多种图片切换特效,这里只有手动切换哦,自动效果需自写,效果地址:http://dwz.cn/1drD5u. 下载地址:http://***/download/index/52209 适 ...

随机推荐

  1. Log4j按级别输出日志到不同文件配置分析

    关于LOG4J 按照级别输出日志,并按照级别输出到不同文件中的说法有很多, 网上贴的最多的log4j.properties的设置是这样的 log4j.rootLogger=info,stdout,in ...

  2. VMware Workstation 14 Pro 激活密钥

    VMware Workstation 14 Pro 激活密钥 CG54H-D8D0H-H8DHY-C6X7X-N2KG6 ZC3WK-AFXEK-488JP-A7MQX-XL8YF AC5XK-0ZD ...

  3. [Linux] 关于Unix哲学

    reference : http://www.ruanyifeng.com/blog/2009/06/unix_philosophy.html 先讲两个很老的小故事. 第一个故事. 有一家日本最大的化 ...

  4. [Android Pro] Android源码编译后,再重编译所需要做的清理工作

    1.在源码目录的根目录下,make clean; 2.进到源码的\linux\kernel\目录下,执行make mrproper: 3.再退回到根目录,执行source  build/envsetu ...

  5. python——获取数据类型:type()、isinstance()的使用方法:

    python——获取数据类型   在python中,可使用type()和isinstance()内置函数获取数据类型 如: (1)type()的使用方法: >>> a = '230' ...

  6. php扩展开发笔记(2)多个源代码文件的配置和编译

    我们在开发过程中,为了代码得可读性和易维护性,肯定是须要多个代码文件的,而不不过通过 ext_skel 生成得骨架文件. 这篇文章主要介绍下.多个代码文件的时候.我们须要注意什么,以及怎么做. 我的代 ...

  7. JavaBean示例

    例1.通过非可视化的JavaBean,封装邮箱地址对象,通过JSP页面调用该对象来验证邮箱地址是否合法. (1)创建名称为Email的JavaBean对象,用于封装邮箱地址,关键代码如下: packa ...

  8. 第三章 LinkedList源码解析

    一.对于LinkedList需要掌握的八点内容 LinkedList的创建:即构造器 往LinkedList中添加对象:即add(E)方法 获取LinkedList中的单个对象:即get(int in ...

  9. jQuery的deferred对象使用笔记

    一.什么是deferred对象? 开发网站的过程中,我们经常遇到某些耗时很长的javascript操作.其中,既有异步的操作(比如ajax读取服务器数据),也有同步的操作(比如遍历一个大型数组),它们 ...

  10. 开源 java CMS - FreeCMS2.2 网站管理

    项目地址:http://www.freeteam.cn/ 网站管理 FreeCMS支持站点群模式,并支持无限树级管理. 网站的相关文件在site文件夹下,每一个网站有自己的文件夹,源文件文件夹名就是自 ...