本文介绍了一个基于JavaScript的图片切换练习，通过设置定时器实现每秒自动切换图片。同时，通过按钮控制图片的开始和暂停切换。在开始切换前，需要确保已关闭之前的定时器，以避免图片切换速度过快。使用clearInterval()方法关闭指定的定时器，确保了暂停功能的正确执行。
基于定时器的图片切换练习思路：
- 将图片放置在页面相应的位置，为其设置id。
- 获取图片元素，新建一个imgArr数组来保存需要进行切换的图片，声明变量index来保存数组的索引。
- 开启定时器，设置延时为1秒，在定时器中使index自增，然后修改图片的src为imgArr数组的相对索引值。
- 用按钮来控制图片开始切换或者暂定切换：添加两个按钮，并设置id。获取两个按钮元素，分别为其绑定单击事件，将开始切换的定时器移至开始按钮的单击事件下，在暂停单击按钮的时间下关闭对应定时器
- 注意：定时器的标识在全局变量中声明，如果分别在两个单击事件中定义，那么关闭定时器的按钮事件下无法获取有效标识。
- 重要的一步：在开始定时器钱将上一个开启的定时器关闭，如果不将上一个开启的定时器关闭，重复开启定时器会导致图片切换速度过快，而且关闭定时器的按钮只能关闭最后一个开启的定时器。
注意：1.在开启定时器之前，需要将当前需要开启定时器的元素的其他定时器关闭。
2.clearInteral()可以接收任意的参数，如果参数是有效的标识，则停止标识对应的定时器，如果无效，则啥也不做。
练习代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
#img1{
width: 
最低0.47元/天 解锁文章
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
