【JavaScript】案例2：轮播图

👀专栏介绍

【JavaScript】 目前主要更新JavaScript，一起学习一起进步。

👀本期介绍

本期主要介绍案例2：轮播图

文章目录

1. 需求说明

2. 知识讲解-JavaScript（二）

2.1 定时器

2.1.1 循环定时器的设置和取消

2.1.2 一次性定时器的设置和取消

2.2 js 事件-onload

3. 需求分析

4. 案例代码实现

1. 需求说明

需要编写程序，完成自动切换图片功能。

每 2 秒切换一次图片。

2. 知识讲解-JavaScript（二）

2.1 定时器

2.1.1 循环定时器的设置和取消

2.1.1.1 启动循环定时器-setInterval()

循环定时器，调用一次就会创建并循环执行一个定时器。

格式：

setInterval( 调用方法 , 毫秒值 );

// 毫秒值： 循环周期

示例：

效果：（每隔一秒就会弹出一次对话框）

2.1.1.2 停止循环定时器-clearInterval()

setInterval 方法在创建一个定时器的同时，还会返回一个的定时器的 ID ，该 ID 就代表这个定时

器。此定时器 ID 在当前页面是不重复的。

我们可以通过 clearInterval 方法，指定某个循环定时器 停止

格式：

clearInterval( 定时器 ID);

示例：

效果：

因为定时器设定后立即取消了，所以没有任何效果

2.1.2 一次性定时器的设置和取消

2.1.2.1  启动一次性定时器 -setTimeout()

一次性定时器，调用一次就会创建并执行一个定时器一次。

格式：

setTimeout( 调用方法 , 毫秒值 );

示例：

效果：

2.1.2.2 停止一次性定时器 clearTimeout()

setTimeout 方法在创建一个定时器的同时，还会返回一个的定时器的 ID ，该 ID 就代表这个定时

器。

此定时器 ID 在当前页面是不重复的。

我们可以通过 clearTimeout 方法，指定某个一次性定时器 停止

格式：

clearTimeout ( 定时器 ID);

示例：

效果：

因为定时器设定后立即取消了，所以没有任何效果。

2.2 js 事件-onload

加载完毕事件：元素组件加载完毕时触发

示例：

效果：

3. 需求分析

4. 案例代码实现