使用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. Jib构建镜像的问题分析(Could not find or load main class ${start-class})

    问题简述 通过Jib插件将SpringBoot工程制作成Docker镜像成功,但是运行镜像的时候报错(Could not find or load main class ${start-class}) ...

  2. 死磕 java同步系列之Phaser源码解析

    问题 (1)Phaser是什么? (2)Phaser具有哪些特性? (3)Phaser相对于CyclicBarrier和CountDownLatch的优势? 简介 Phaser,翻译为阶段,它适用于这 ...

  3. C/C++中变量的作用域和存储类型简介

    写在开头 对于很多C/C++的初学者来说,很容易理不清变量的作用域和存储类型这一块的一些概念,也容易将其中的一些概念搞混淆.作为一个C/C++的初学者,笔者希望在这里能够尝试着去理一理这些较为繁杂的概 ...

  4. 正睿OI国庆day1

    正睿OI国庆day1 T1 \[ S_n=1*S_{n-1}+1*F_{n-1}+1*F_{n-2}+1*f_{n-1}+1*f_{n-2} \] \[ F_{n}=0*S_{n-1}+1*F_{n- ...

  5. 设计模式的七大原则(Java)

    一.OOP三大基本特性 OOP 面向对象程序设计(Object Oriented Programming)作为一种新方法,其本质是以建立模型体现出来的抽象思维过程和面向对象的方法.模型是用来反映现实世 ...

  6. Basic Example using SMTP (for PHPMailer v5.0.0 and up)

    sample as below: require_once('../class.phpmailer.php'); //include("class.smtp.php"); // o ...

  7. FFmpeg（一）

    1. FFmpeg分为3个版本:Static.  Shared. Dev 前两个版本可以直接在命令行中使用.包含了三个exe:ffmpeg.exe,ffplay.exe,ffprobe.exe Sta ...

  8. SpannableString与SpannableStringBuilder

    一.概述 1.SpannableString.SpannableStringBuilder与String的关系 首先SpannableString.SpannableStringBuilder基本上与 ...

  9. Win10安装虚拟机 + Ubuntu

    近期需要利用虚拟机,同时在虚拟机中安装Ubuntu系统.整理安装过程,供今后学习参考. 虚拟机安装包:VMware-workstation-full-12.1.0 链接:https://pan.bai ...

  10. .net工作流引擎ccflow开发平台属性功能的隐藏显示介绍

    关键字: 工作流程管理系统 工作流引擎 asp.net工作流引擎 java工作流引擎. 表单引擎 工作流功能说明  工作流设计 工作流快速开发平台   业务流程管理   bpm工作流系统  java工 ...