<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. FFmpeg的H264编码有内存泄漏吗??!!!

    靠,内存泄漏好严重.开始怀疑是自己代码问题,调试了半天,又反复改写和优化代码,还是泄漏严重. 拿网上现成的FFMPEG H264编码的范例来测试,同样泄漏很严重. 百度了一下,有很多人遇到同样的问题, ...

  2. Redis五大数据结构

    1.Redis介绍 Redis是REmote DIctionary Server的缩写,作者定位于一个内存KV存储数据库(In-memory key-value Store),让Redis自豪的并不是 ...

  3. Makefile 选项 CFLAGS 、LDFLAGS 、LIBS

    CFLAGS 表示用于C编译器的选项 CXXFLAGS 表示用于C++编译器的选项 这两个变量实际上涵盖了编译和汇编的两个步骤 CFLAGS:指定头文件(.h)的路径,如:CFLAGS=-I/usr/ ...

  4. Unix/Linux环境C编程新手教程(30) 字符串操作那些事儿

    函数介绍 rindex(查找字符串中最后一个出现的指定字符) 相关函数 index,memchr,strchr,strrchr 表头文件 #include<string.h> 定义函数 c ...

  5. SVN使用小结

    SVN是Subversion的简称.是一个开放源码的版本号控制系统.在它的管理下,文件和文件夹能够超越时空的限制,权且当作一种奇妙的"时间机器"吧. 基本功能 版本号控制 作为一个 ...

  6. [leetcode]Flatten Binary Tree to Linked List @ Python

    原题地址:http://oj.leetcode.com/problems/flatten-binary-tree-to-linked-list/ 题意: Given a binary tree, fl ...

  7. Android动画-帧动画

    Android 平台提供了两种动画一种是 Frame动画,即顺序的播放事先做好的图像,与gif图片或者说跟放电影的原理相似,另一种是Tween动画,就是对场景里的对象不断的进行图像变化来产生动画效果( ...

  8. 基础学习:C#中float的取值范围和精度

    float类型的表现形式: 默认情况下,赋值运算符右侧的实数被视为 double. 因此,应使用后缀 f 或 F 初始化浮点型变量,如以下示例中所示: float x = 3.5F; 如果在以上声明中 ...

  9. java根据经纬度获取地址

    public class GetLocation { public static void main(String[] args) { // lat 39.97646 //log 116.3039 S ...

  10. Logistic Regression的几个变种

    原文:http://blog.xlvector.net/2014-02/different-logistic-regression/ 最近几年广告系统成为很多公司的重要系统之一,定向广告技术是广告系统 ...