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 适 ...
随机推荐
- Spring4.0+quartz2.2.1+memcahce多台nginx实现均衡
1.每台nginx都有公网地址,在域名处设置同个域名多个指向,最简单实现轮洵.但故障切负会慢一点.2.一台公网nginx通过upstream功能,轮洵.ip.url多方式分发到内网多台nginx.但公 ...
- nginx: [error] invalid PID number “” in “/usr/local/var/run/nginx/nginx.pid”
在Mac上用brew安装Nginx,然后修改Nginx配置文件,再重启时报出如下错误: nginx: [error] invalid PID number "" in " ...
- java使用POI获取sheet、行数、列数
FileInputStream inp = new FileInputStream("E:\\WEIAN.xls"); HSSFWorkbook wb = new HSSFWork ...
- Android之与当前连接的wifi进行文件夹的浏览与传输
先上传jar文件:ConnectWifi.jar.zip 上传源文件:org.zip 使用实例及相应的注释: import java.io.File; import java.net.InetAddr ...
- android之使用mvn构建创造项目步骤
转自:http://blog.csdn.net/luhuajcdd/article/details/8132386 手动的创建自己的android application 1.用android t ...
- Git 学习(四)操作修改和版本穿梭
Git 学习(四)操作修改和版本穿梭 之前的章节,已介绍了本地Git库创建.暂存区增.删.改,以及提交版本库:可回顾下命令操作: git add 和 git commit. 光有之前章节的操作,Git ...
- Android几种Service常驻内存的小思路
老话说的好:躲得了初一,躲只是高三 ! 大多数的Android开发人员遇到的一个问题-怎样保证Service常驻内存. 近期我最终也在项目中务必幸运的遇到了 先来了解一下什么是Service常驻内存. ...
- UNIX域套接字——UNIX domain socket(DGRAM)
#define UNIX_PATH_MAX 108 #include <sys/types.h> #include <sys/socket.h> #include <sy ...
- Android中样式及主题
Android应用程序中不可避免的需要使用的样式和主题,样式指定一般指定View的高度.字体.字体颜色.背景,Android里的样荐定义在Style.xml文件里.主题也是一种样式,只不过它是应用在整 ...
- HTML5, CSS3, ES5新的web标准和浏览器支持一览 转
本文整理了一些最重要(或者说人气比较高罢)的新标准,虽然它们多数还只是w3c的草案,离Recommendation级别还早,却已经成为新一轮浏览器大战中备受追捧的明星,开发者社区里也涌现出大量相关的d ...