文档章节

超时调用实现图片自动切换

 林冲zjm
发布于 2016/03/17 16:58
字数 386
阅读 8
收藏 0
超时调用实现图片切换:

1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 <head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <title>images</title> 
 <script type="text/javascript"> 
  var curIndex = 0; 
  var timeInterval = 1000; //为间隔时间赋值
  var arr = new Array();  //创建一个包含图片的数组
  arr[0] = "images/1.jpg"; 
  arr[1] = "images/2.jpg"; 
  arr[2] = "images/3.jpg"; 
  arr[3] = "images/4.jpg"; 
  arr[4] = "images/5.jpg"; 
  arr[5] = "images/6.jpg"; 
  
  setTimeout(changeImg,timeInterval);  //超时调用
  function changeImg() {     //创建切换图片的函数
   var obj = document.getElementById("obj");   //得到id=obj的元素
   if (curIndex == arr.length-1) {   
    curIndex = 0;   //如果图片的下标到了数组的最后一个,则赋值为0(即数组第一个)
   } else { 
    curIndex += 1; 
     } 
   obj.src = arr[curIndex];  //数组值对应的链接
   setTimeout(changeImg,timeInterval); //调用超时函数(如果不调用,超时调用只会调用一次)
  } 
 </script> 
 </head> 
 <body> 
  <img id = "obj" src = "images/1.jpg" border = 0 /> 
 </body> 
</html>

2

1、HTML结构
<img src="1.png" id="test">
2、javascript代码
function change(n){
if(n>5) n=1;  // 一共5张图片,所以循环替换
document.getElementById("test").setAttribute("src", n+".png");
n++;
setTimeout("change("+n+")",1000);
}
window.onload = function(){
setTimeout("change(1)", 1000);
}
超时调用:

超时调用需要使用window对象的setTimeout()方法。

两个参数: (要执行的代码 ,以毫秒表示的时间);


取消超时调用:
var timeoutId=setTimeout(function(){
        alert("hello world");
    },1000
);
clearTimeout(timeoutId); //取消超时调用(这里因为取消调用是在调用超时调用的时间之后,所以跟没发生一样)


© 著作权归作者所有

上一篇: 匹配链接
下一篇: 匹配链接
粉丝 0
博文 2
码字总数 493
作品 0
芜湖
私信 提问
SpringCloud基础之断路器

1.断路器 在微服务架构中,存在着多个微服务,彼此之间可能存在依赖关系,当某个单元出现故障或者网络不通时,就会因为依赖关系形成故障蔓延,最终导致整个系统的瘫痪,相对于传统架构更加不...

明理萝
2018/09/06
8
1
Spring Cloud构建微服务架构—Hystrix断路器

断路器模式源于Martin Fowler的Circuit Breaker一文。“断路器”本身是一种开关装置,用于在电路上保护线路过载,当线路中有电器发生短路时,“断路器”能够及时的切断故障电路,防止发生过载...

明理萝
2018/06/11
15
3
防雪崩利器:熔断器 Hystrix 的原理与使用

前言 分布式系统中经常会出现某个基础服务不可用造成整个系统不可用的情况, 这种现象被称为服务雪崩效应. 为了应对服务雪崩, 一种常见的做法是手动服务降级. 而Hystrix的出现,给我们提供了另...

ybak
2016/08/18
6.9K
9
Android 二次封装网络加载框架

Android 二次封装网络加载框架 写在最前面 开发当中,在请求网络的时候,大家或多或少都会使用一些第三方框架,Android-Async-Http、 Volley、XUtils、Okhttp、Retrofit 等。这些框架减少了我...

xujun9411
2017/11/24
0
0
iOS应用后台进行数据更新和下载

Background fetch 首先在info plist文件中开启UIBackgroundModes的Background fetch。或者手动编辑这个值 iOS默认不进行background fetch,需要设置一个时间的间隔 最后在App Delegate里实现...

IamOkay
2016/06/09
368
0

没有更多内容

加载失败,请刷新页面

加载更多

计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
今天
5
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
今天
7
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
今天
6
0
【技术分享】TestFlight测试的流程文档

上架基本需求资料 1、苹果开发者账号(如还没账号先申请-苹果开发者账号申请教程) 2、开发好的APP 通过本篇教程,可以学习到ios证书申请和打包ipa上传到appstoreconnect.apple.com进行TestF...

qtb999
今天
10
0
再见 Spring Boot 1.X,Spring Boot 2.X 走向舞台中心

2019年8月6日,Spring 官方在其博客宣布,Spring Boot 1.x 停止维护,Spring Boot 1.x 生命周期正式结束。 其实早在2018年7月30号,Spring 官方就已经在博客进行过预告,Spring Boot 1.X 将维...

Java技术剑
今天
18
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部