<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. 2008技术内幕:T-SQL语言基础 联接查询摘记

    续 2008技术内幕:T-SQL语言基础 单表查询摘记 第三章 联接查询 Microsoft SQL Server 2008 支持四种表运算符 join(ANSI标准).apply(T-SQL扩展). ...

  2. jQuery2.0应用开发:SSH框架整合jQuery2.0实战OA办公自己主动化(VSS、operamasks-UI框架)

    我的qq是2059055336,对这个课程有兴趣的能够加我qq联系. 一.本课程是怎么样的一门课程(全面介绍)    1.1.课程的背景 jQuery 2.0 正式版公布.不在支持 IE 6/7/8  ...

  3. Android DiskLruCache 源代码解析 硬盘缓存的绝佳方案

    转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/47251585: 本文出自:[张鸿洋的博客] 一.概述 依然是整理东西.所以最近 ...

  4. Objective-C:NSDectionary字典的常见操作

    NSDectionary字典:它是一个存储键值的容器,每一个键key都对应着一个值value,可以通过键key一次性找到目标值value,这是一个比较好的存储器,相比于数组而言,它明显提高了查询效率. ...

  5. 使用自由软件Icarus Verilog Simulator进行仿真

    Icarus Verilog Simulator(http://iverilog.icarus.com/home)使用iverilog作为源代码编译器,编译生成vvp程序文本,使用vvp作为运行时引擎 ...

  6. 新买的mac笔记本,发现vi编辑器没有颜色的解决方案

    新买的mac笔记本,发现vi编辑器没有颜色的解决方案 我在网络上找了一些资料,发现都有些问题,尤其是一些让修改根目录上的文件,发现根本无法修改. 但是在网络上找到了这篇文章: http://super ...

  7. Android之WifiManager

    移动设备离不开网络,android平台中在包android.net.wifi下提供了一些类专门用于管理设备的Wifi功能.该包下主要存在如下几个类: 1.  ScanResult:主要用来描述通过Wi ...

  8. 关于css优先级

    css的优先级从低到高依次是:内部样式表的优先级为(1,0,0,0),id选择器优先级为(0,1,0,0),class选择器为(0.0,1,0),tag标签为(0.0,0,1).除此之外,!impor ...

  9. ListView.MouseDoubleClick

    private void ruleListView_MouseDoubleClick(object sender, MouseButtonEventArgs e) { ListViewItem ite ...

  10. [Algorithm] Given the root to a binary tree, return the deepest node

    By given a binary tree, and a root node, find the deepest node of this tree. We have way to create n ...