js 随机变换图片
<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 随机变换图片的更多相关文章
- js随机显示图片
定义一个图片数组,生成一个随机数对应数据索引. window.onload = choosePic; function choosePic() { var myPix = new Array(&quo ...
- 随机漂浮图片、右侧上下浮动快捷栏JS
随机漂浮图片JS: //公共脚本文件 main.js function addEvent(obj,evtType,func,cap){ cap=cap||false; if(obj.addEventL ...
- JS实现鼠标移入DIV随机变换颜色
今天分享一个在 JavaScript中,实现一个鼠标移入可以随机变换颜色,本质就是js的随机数运用. 代码如下: <!DOCTYPE html> <html> <head ...
- JS实现的随机显示图片
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...
- 完整说明使用SpringBoot+js实现滑动图片验证
常见的网站验证方式有手机短信验证,图片字符验证,滑块验证,滑块图片验证.本文主要讲解的是滑块图片验证的实现流程.包括后台和前端的实现. 实现效果 使用的API java.awt.image.Buffe ...
- js 随机星星 document.createElement(); setAttribute()
js 随机星星 document.createElement(); setAttribute() <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...
- 随机获取图片的api接口
http://lorempixel.com/1600/900 https://unsplash.it/1600/900?random(国内加载略慢) https://uploadbeta.com/ap ...
- 原生js如何实现图片翻转旋转效果?
原生js如何实现图片翻转旋转效果? 一.总结 1.通过给元素设置style中的transition来实现的. 2.我昨天纠结的效果全部可以通过精读这个代码后实现. 二.原生js如何实现图片翻转旋转效果 ...
- js多种切换图片
分享通过js实现多种图片切换特效,这里只有手动切换哦,自动效果需自写,效果地址:http://dwz.cn/1drD5u. 下载地址:http://***/download/index/52209 适 ...
随机推荐
- 使用 SQLiteManager 操作 sqlite3 数据库
SQLiteManager https://github.com/misato/SQLiteManager4iOS 本人以前从事过嵌入式开发,后来转职为iOS开发,即使如此,也绝不想去碰C语言级别的面 ...
- kafka深入研究(六)
Kafka Producer端封装自定义消息 Kafka.network包源码解读 Kafka Consumer端的一些解惑 Kafka producer使用注意 kafka0.8的一些变动,先收藏, ...
- Android 系统服务一览表
在<Zygote进程[3]--SystemServer的诞生>一文中介绍了SystemServer的诞生,本文来看一下SystemServer中初始化的系统服务. 1.AccountMan ...
- 【C++ Primer】用于大型程序的工具
1. 异常处理 异常以类似于将实參传递给函数的方式抛出和捕获.异常可以是可传给非引用实參的随意实參的类型,这意味着必须可以复制该类型的对象. 当抛出一个表达式的时候,被抛出对象的静态编译时类型将决定异 ...
- 运行时类型识别RTTI
1.RTTI的工作原理 例1. 用Class加载对象示例. package RTTI; public class Candy { static{ System.out.println("Lo ...
- 还原JavaScript的真实历史~
问题 ============ JavaScript真的继承自Cmm吗? JavaScript与Java有多少关系? JavaScirpt最初的设计是怎样的?在许多资料,JavaScript的语源被追 ...
- CentOS上编译安装OpenCV-2.3.1与ffmpeg-2.1.2
已測试环境: CentOS 6.3 32bit CentOS 6.5 64bit 以前在CentOS 6.3 32bit安装过OpenCV,參见CentOS 6.3中安装OpenCV2.3.1,现在换 ...
- CentOS 服务器安全设置
我们必须明白:最小的权限+最少的服务=最大的安全.所以无论是配置任何服务器,我们都必须把不用的服务关闭.把系统权限设置到最小化,这样才能保证服务器最大的安全. 一.注释掉系统不需要的用户和用户组 ...
- Cognos由于JAVA_HOME冲突引起的错误假象
Cognos的安装和配置并不是很复杂,但是对于初次安装的用户来说,还是要注意一些细节,比如JDK问题,今天我们就来阐述一下这个问题 场景1: 作为一个开发人员,很多人是十八般武艺样样精通,难免已经在自 ...
- Kettle资源库采用SQLserver数据库需要注意的点
Kettle开源ETL工具有着自己的元数据存储方式,可以分为两种 1:File 2:DB 文件存储我这里就不多说了,下面说一下在用SQLserver2008 R2作为资源库在创建的过程中遇到的问题 K ...