使用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网络参数的配置

    一.实验目的 1．掌握Linux下网络参数的查看方法并理解网络参数的含义. 2．掌握Linux下网络参数的配置 二.实验内容 1．查看当前网络配置的参数. 2．在Linux主机中将网络参数按以下要求设 ...

  2. json入门初体验

    json是JavaScript对象表示法,也是轻量级的文本数据交互格式,独立于语言,能够自我描述 json文本格式在语法上与创建JavaScript对象代码相同,多以json不需要解析器,js程序能够 ...

  3. 读《深入理解Elasticsearch》点滴-改正用户拼写错误

    1.使用“建议”的方法:在query body的json结构体中,增加suggest节点:或者使用特殊的REST端点 2.es自带有多个不同的suggest实现,用来纠正用户的拼写错误及创建自动补全等 ...

  4. Vue2.0+ElementUI实现表格翻页的实例

    参考地址: https://www.cnblogs.com/zhouyifeng/p/7706815.html

  5. Linux 远程登录命令telnet

    一.telnet简介: telnet命令通常用来远程登录.telnet程序是基于TELNET协议的远程登录客户端程序.Telnet协议是TCP/IP协议族中的一员,是Internet远程登陆服务的标准 ...

  6. jquery 动态控制显隐

    1.第1种方法 ,给元素设置style属性 $("#hidediv").css("display", "block"); 2.第2种方法 , ...

  7. spring5 源码深度解析----- AOP代理的生成

    在获取了所有对应bean的增强后,便可以进行代理的创建了.回到AbstractAutoProxyCreator的wrapIfNecessary方法中,如下所示: protected static fi ...

  8. Spark 学习笔记之 Standalone与Yarn启动和运行时间测试

    Standalone与Yarn启动和运行时间测试: 写一个简单的wordcount: 打包上传运行: Standalone启动: 运行时间: Yarn启动: 运行时间: 测试结果: Standalon ...

  9. [转] Julia 高性能动态编程语言入门

    本文共 851字,阅读大约需要 3分钟 ! 概 述 Julia 是一个 "全新"的高性能动态编程语言,前两天迎来了其 1.0 正式版的重大更新.Julia集 Python.C.R. ...

  10. echarts地图边界数据的实时获取与应用，省市区县多级联动【附最新geoJson文件下载】

    首先,来看下效果图 在线体验地址:https://hxkj.vip/demo/echartsMap/,并提供实时geoJson数据文件下载 echarts官方社区链接地址(可在线编辑):https:/ ...