使用js做到随机切换图片

<!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="UTF-8">

 <title></title>

</head>

<body>

<img src="1.jpg" width="280px" height="280px" id="tpid" style="display: block; margin: auto;"><br><br>

<button onclick="aa()"style="display: block; margin: auto;">开始</button>

<button onclick="bb()"style="display: block; margin:20px auto;">四秒后停止</button>

 <script>

 var sj;

 var tpm;

 var intervalId;

 function bb(){setTimeout(function() {clearInterval(intervalId);},)}

 function aa(){intervalId=setInterval(function() {sj=parseInt(Math.random()*+);

  tpm=sj+".jpg";

  document.getElementById("tpid").src=tpm;},)}

 </script>

</body>

</html>

效果如下：

js图片随机切换的更多相关文章

  1. JS图片Switchable切换大集合

    JS图片切换大集合 利用周末2天把JS图片切换常见效果封装了下,比如:轮播,显示隐藏,淡入淡出等.废话不多说,直接看效果吧!JSFiddler链接如下: 想看JS轮播切换效果请点击我! 当然由于上传图 ...

  2. js 颜色随机切换

    生成随机颜色 方法1:RGB模式 function randomColor1() { var r=Math.floor(Math.random()*256); var g=Math.floor(Mat ...

  3. js设置随机切换背景图片

    <script> var imgs =["http://images.cnblogs.com/cnblogs_com/xiaobo-Linux/1112236/o_2.jpg&q ...

  4. 原生js+css3实现图片自动切换，图片轮播

    运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...

  5. JS图片自动和可控的轮播切换特效

    点击这里查看效果:http://hovertree.com/texiao/js/1.htm HTML文件代码如下: <!DOCTYPE html> <html xmlns=" ...

  6. js实现图片自动切换效果。

    js实现图片自动切换效果,简单实用,原谅我只是一只小菜鸟还在学大神天天写博文装逼. <script language="javascript"> setInterval ...

  7. 原生JS—实现图片循环切换的两种方法

    今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法.多余的话我们就不多说了,我们一个一个开始讲吧. 1  原生JS实现图片循环切换 -- 方法一 在上栗子之前我们先简单介绍一下所用的一些知识点. ...

  8. 原生JS—实现图片循环切换及监测鼠标滚动切换图片

    今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法以及如何检测鼠标滚动循环切换图片.多余的话我们就不多说了,我们一个一个开始讲吧. 1  原生JS实现图片循环切换 -- 方法一 在上栗子之前我们 ...

  9. JS框架_(JQuery.js)图片相册掀开切换效果

    百度云盘 传送门 密码:y0dk 图片掀开切换效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo ...

随机推荐

  1. linux&shell学习系列

    1.VMware安装Centos7虚拟机 2.Linux之vim详解 3.linux后台运行的几种方式 4.linux权限管理 5.linux之用户和用户组管理详解 6.grep文本搜索工具详解 7. ...

  2. 通过实例快速掌握k8s（Kubernetes）核心概念

    容器技术是微服务技术的核心技术之一,并随着微服务的流行而迅速成为主流.Docker是容器技术的先驱和奠基者,它出现之后迅速占领市场,几乎成了容器的代名词.但它在开始的时候并没有很好地解决容器的集群问题 ...

  3. 激突要塞代码解阵算法+用C++/Python处理代码

    激突要塞的代码长度为6的倍数,其中每6个字符代表着一个单位,这六个字符中,第一位代表着单位的种类,后五位则包含着单位角度.X值.Y值的信息. 那么这个第一位究竟代表什么呢?一图以示之. 那么在代码中就 ...

  4. 虚拟现实中自由步行（free-space walking）

    之前我们讲到了虚拟现实中漫游方式的分类.虚拟现实中的漫游(travel/navigate)方式,即是应用提供给用户的,在虚拟环境中移动的方式.虚拟现实的漫游方式中,有一种被称为“完全动作线索”1,即用 ...

  5. Go语言入门教程(十)之函数

    Hello 各位小伙伴大家好,我是小栈君,假期一眨眼就过去了.不知道大家玩的是否开心呢? 上次我们讲到了关于Go语言的流程控制,小栈君也希望小伙伴跟着小栈君一步一个脚印的敲一下代码,相互进步.本期我们 ...

  6. JS时间格式CST转GMT

    转换方法:JS 时间格式CST转GMT 时区和Date:Java中的Date和时区转换

  7. Ansible Roles角色

    Roles小技巧: 1.创建roles目录结构,手动或使用ansible-galaxy init test roles 2.编写roles的功能,也就是tasks. nginx rsyncd memc ...

  8. 从零开始的vue学习笔记（七）

    前言 今天花一天时间阅读完vuex的官方文档,简单的做一下总结和记录 Vuex是什么 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,以前的符合"单向数据流"理念的 ...

  9. 02-28 scikit-learn库之线朴素贝叶斯

    目录 scikit-learn库之朴素贝叶斯 一.MultinomialNB 1.1 使用场景 1.2 代码 1.3 参数详解 1.4 属性 1.5 方法 二.GaussianNB 三.Bernoul ...

  10. cookie和session,cookie和web storage

    一.cookie和session cookie和session的共同之处在于:cookie和session都是用来跟踪浏览器用户身份的会话方式. session指的是访问者从到达某个特定页面到离开为止 ...