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 适 ...
随机推荐
- Oracle WIHT AS 用法
1.with table as 相当于建个临时表(用于一个语句中某些中间结果放在临时表空间的SQL语句),Oracle 9i 新增WITH语法,可以将查询中的子查询命名,放到SELECT语句的最前面. ...
- Jquery焦点图/幻灯片效果 插件 KinSlideshow
JavaScript $(function(){ $("#KinSlideshow").KinSlideshow({ moveSty ...
- 《Windows核心编程》第1章——错误处理
GetLastError: GetLastError返回错误编码,即便出错函数后边跟随一个正确执行了的函数,也不会覆盖原先的错误代码: 考虑多线程的情况.子线程中的错误代码不会被主线程捕获: 但是子函 ...
- 2012年及之后的ImageNet比赛的冠军、亚军和季军ImageNet winners after 2012
2012 0.15 - Supervision (AlexNet) - ~ 60954656 params 0.26 - ISI (ensemble of features) 0.27 - LEAR ...
- [16] 螺旋面(Spire)图形的生成算法
顶点数据的生成 bool YfBuildSpireVertices ( Yreal radius, Yreal assistRadius, Yreal height, Yuint slices, Yu ...
- mysql必知必会(四、检索数据,五、排序检索数据,六、过滤数据,七、数据过滤)
四.select语句 1.检索单个列 select prod_name from products; 2.检索多个列 select prod_name, prod_price from product ...
- Android组件之自定义ContentProvider
Android的数据存储有五种方式Shared Preferences.网络存储.文件存储.外储存储.SQLite,一般这些存储都只是在单独的一个应用程序之中达到一个数据的共享,有时候我们需要操作其他 ...
- liunx step by step(3)
由于我的ubuntu是装载在virtualbox的虚拟机中,怎么实现其中的数据的共享,显得非常的必要:额,具体这么办. 1.安装增强功能.挂载光盘. 打开其相应的终端:fantlam@fantlam- ...
- Android下 使用百度地图sdk
百度地图 Android SDK是一套基于Android 2.1(v1.3.5及以前版本支持android 1.5以上系统)及以上版本设备的应用程序接口.可以使用该套 SDK开发适用于Android系 ...
- Java Web -- Servlet(5) 开发Servlet的三种方法、配置Servlet具体解释、Servlet的生命周期(2)
三.Servlet的生命周期 一个Java servlet具有一个生命周期,这个生命周期定义了一个Servlet怎样被加载并被初始化,怎样接收请求并作出对请求的响应,怎样被从服务中清除.Servlet ...