使用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. 基于操作系统原理的Red Hat Linux的基本操作

    一.实验目的 1．了解Linux操作系统的启动与登录方法. 2．掌握Red Hat Linux图形用户界面下的基本操作. 3．学会Red Hat Linux基本设置. 二.实验内容 1． 登录 2． ...

  2. Oracle clob列union的方法（ORA-00932）

    今天在做“站内搜索”数据抽取时,为了能将多个相似的数据库表数据合并,使用了SQL中union关键字,期望将多个单独的SQL查询结果合并到一起.每个单独的SQL都能成功执行,在union合并的过程中遇到 ...

  3. Spring MVC-从零开始-web.xml中classpath和classpath* 有什么区别

    web.xml中classpath和classpath* 有什么区别?classpath:只会到你的class路径中查找找文件;classpath*:不仅包含class路径,还包括jar文件中(cla ...

  4. Spring框架（三）

    对象依赖关系 Spring中,如何给对象的属性赋值?  [DI, 依赖注入] 1) 通过构造函数 2) 通过set方法给属性注入值 3) p名称空间 4)自动装配(了解) 5) 注解 代码示例: &l ...

  5. 从ASP.Net Core Web Api模板中移除MVC Razor依赖项

    前言 :本篇文章,我将会介绍如何在不包括MVC / Razor功能和包的情况下,添加最少的依赖项到ASP.NET Core Web API项目中. 一.MVC   VS WebApi (1)在ASP. ...

  6. js三级联动效果city-picker

    链接:https://pan.baidu.com/s/1NE_EO5_xGvR-y-lboYap7g 提取码:h00e 效果展示: 解决: 动态赋值: 注意:在执行赋值之前,必须执行reset和des ...

  7. pyinstaller程序打包工具

    PyInstaller是一个能将Python程序转换成单个可执行文件的程序, 操作系统支持Windows, Linux, Mac OS X, Solaris和AIX.并且很多包都支持开箱即用,不依赖环 ...

  8. dedecms5.7最新漏洞修复

    最近发现织梦cms被挂马现象频繁,解决好好几个网站的问题,但是过不了多久,就又被攻击了,即使更改系统及ftp密码,也没有起到防御的作用,最后怀疑cms本身漏洞,于是采用工具扫描了一下,才发现问题的严重 ...

  9. Nginx+Tomcat Https SSL部署方案

    1.软件版本: nginx-1.15+ tomcat-8.0+ 2.先解决一个疑问:Tomcat到底需不需要配置SSL? 答案:不需要 3.SSL申请 使用腾讯云.阿里云的服务器,会更加方便申请.(申 ...

  10. opencv之为图像添加边界

    我们经常会有对图像边缘做扩展的需求.比如 希望卷积后得到的矩阵大小不变 希望改变图像大小,但是不改变宽高比 opencv实现 opencv中使用copyMakeBorder()来完成这一功能 api ...