添加lol轮播图定时器

280 阅读1分钟

一、定时器:每间隔一段时间后,自动执行一些对应的业务逻辑。
创建定时器所需代码:setInterval(function( ){函数}, 时间(单位是毫秒))
例1:编写一个程序,每隔1秒,在命令行输出一行“hello world”。
代码如下:

26.png

27.png

例2:在例1的基础上编写一个程序,在命令行输出一行“你好,世界”,并终止例1中的定时器。
点击事件所需代码:bt1(根据自己需求换其他的).onclick=function(){}
终止定时器所需代码:clearInterval()
代码如下:

28.png

29.png

例3:在例2的基础上,重启t1的定时器。
代码如下:

30.png

31.png

二、添加lol轮播图的定时器
给轮播图添加定时器,且当图片滚动时,让对应的导航加上选中样式。
代码如下:

32.png

33.png

34.png

在此基础上,当鼠标进入图片部分或者导航部分时,定时器终止。
代码如下:

35.png

36.png

37.png

在此基础上,当鼠标离开时,重启定时器。
离开事件所需代码:banner(根据自己需求可以换其他的).onmouseleave=function( ){ }
代码如下:

38.png

39.png

40.png