轮播计时器

 

Ps：要懂轮播基础原理也就是第一个

• 轮播主要由position 中的 left 操控 从而切换图片 但这毫无动画美感可言的生硬的；

附图1.

 

• 当然代码是没有中文的 而是 你要执行点击事件的元素 和盒子的宽度也可以是图片的宽度；

附图2.

 

1. 这个是有动画的轮播相比较
   1. 上面的是一个青壮年一步直接到达我们下一屏的位置
   2. 而下就像一个和老人一步一休息慢慢的到达

2.SetTimeout (go,s) 计时器（调用的函数与间隔事件）

a)这里就像是老人每走一段路就要休息10毫秒来恢复体力

lb1(offset) offset 外部传入的值 就是一张图片的宽度 也是总路程

• go()
  1. 是判断我是去往上一张图还是下一张图及是不是到达目标的位置（一次的总程是一张图片的宽因为完全的切换的下一张图片那么他的left值就会等同于图片宽）
  2. 然后到达了总路程位置就不再执行计时器了而是执行else内的代码 又给else判断下是不是最后一张图是的话跳转到第一张图重新轮播  不是就把最后的位移量赋值给left；

• lb1();中有调用了go();这种称之为递归

从而实现不断地“休息”和“行走”不然 老人停下就不会走了因为SetTimeout是一次性计时器

附图3.

 

• setInterval 循环计时器 没有移出就一直会执行

每隔两秒调用lb1() 函数

附图4

 

• clearInterval 删除循环计时器 后面的是计时器的名字

 

 

 

 

作者：陈海涛

撰写时间：2019.01.16