使用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. 【Dgango】模版

    继承 ① extends用法:只继承一个模版 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  2. Flask基础(09)-->请求勾子函数

    什么是请求勾子? 为了让每个视图函数避免编写重复的功能代码,flask提供了通用设施的功能,就是所谓的勾子 那么请求勾子就是,在浏览器请求服务器资源的前后挂载相关的处理函数 请求勾子有什么作用? 作用 ...

  3. 05-padding

    padding padding:内边距,内容到边框的距离 而且,padding是有背景颜色的.background-color属性将填充所有border以内的区域(不包括border) padding ...

  4. win10 cnpm安装完之后一直说不是内部命令的原因

    找到cnpm的默认安装路径 一般默认的是 D:\Program Files\nodejs\node_modules 然后添加环境变量中 win10是在系统环境变量中切记不是在用户变量中.保存之后,重新 ...

  5. 夯实Java基础系列16：一文读懂Java IO流和常见面试题

    本系列文章将整理到我在GitHub上的<Java面试指南>仓库,更多精彩内容请到我的仓库里查看 https://github.com/h2pl/Java-Tutorial 喜欢的话麻烦点下 ...

  6. CSS技巧 (2) · 多列等高布局

    前言  最近,面试的时候都碰到一些关于利用CSS实现多列等高布局或者一侧宽度固定,另一侧宽度自适应的问题,下面稍微总结一下: 先看一道题目 巧妙的多列等高布局 规定下面的布局,实现多列等高布局,要求两 ...

  7. 跨域及JSONP原理

    什么是跨域:a.com 域名下的js无法操作b.com或是c.a.com域名下的对象 为什么浏览器要引入跨域问题? 跨域问题来源于浏览器的同源策略,为啥要有这个策略呢? 为了安全.假设现在有a.com ...

  8. 电信资源管理系统:基于 H5 叠加 OpenLayers3 GIS

    前言 通过结合 HTML5 和 OpenLayers 可以组合成非常棒的一个电信地图网络拓扑图的应用,形成的效果可以用来作为电信资源管理系统,美食定位分享软件,片区找房,绘制铁轨线路等等,各个领域都能 ...

  9. RocketMQ消息队列部署与可视化界面安装

    MQ安装部署 最新版本下载:http://rocketmq.apache.org/release_notes 修改配置 vi conf/broker.conf 添加brokerIP1 brokerIP ...

  10. python编程基础之二十九

    栈和队列: 栈:先进后出,其他没多少特别之处了,一般可以用列表模拟栈,也可以用双端队列,封死一端. 队列:先进先出,也可以用列表模拟,但是一般用库函数,需要导collections 包:主要是为了解决 ...