用一次性计时器写轮播函数

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术:DW     判断语句跟计时器的运用

作者:黄海浪

撰写时间:2019年1月17日

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

下面是一段完整的一个轮播函数,让我们来看一下,

用一次性计时器写轮播函数

首先创建一个轮播函数方法,然后声明变量把轮播图片外层div中的id给引过来,接着就是声明总时间,间隔时间,给它们赋值,然后声明speed计算出每一次的位移量赋值给它,然后就是目标值。

准备完成之后再写一个go()方法

用一次性计时器写轮播函数

go()方法里面再做一个if判断当speed<0的时候图片在向左移动,并且style里面的left值>newleft目标值(注意left是负数)就还需要继续移动然后执行下面一段代码,或者( || )当speed>0的时候图片向右移动,speed为正数,并且style里面的left<newleft,也执行下面一段代码.(注意parseInt是把lite.style.left转换成数字类型),下面一段代码就很好理解了

我们来看一下setTimeout一次性计时器,括号里面第一个写的是你要执行的代码,或者是方法,后面写的是时间,总的意思就是延迟多少时间后执行一次代码

下面我们来看一下这张图

用一次性计时器写轮播函数

一次性计时器不是只能执行一次代码吗?为何能够连续执行30次呢,原因在于setTimeout放的位置,setTimeout括号里面放的是go 函数,所以每当代码执行到setTimeout的时候,它又执行一次go函数,然后go函数里面又有setTimeout里面的go函数,这样形成了一个循环,直到if判断不成立的时候才跳出循环,执行else语句。

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2021-09-14
  • 2021-06-23
  • 2021-12-22
  • 2022-12-23
  • 2021-11-24
  • 2022-12-23
猜你喜欢
  • 2021-06-21
  • 2022-12-23
  • 2022-12-23
  • 2021-07-01
  • 2021-07-08
  • 2022-12-23
  • 2022-12-23
相关资源
相似解决方案