【JS实用技巧篇】02-无缝轮播图中的计时器

CSDN话题挑战赛第2期
参赛话题：学习笔记

📖JavaScript专栏：📑js实用技巧篇

👊👊👊该专栏博主会持续更新，目的是给大家分享一些常用实用技巧，同时巩固自己的基础，共同进步✨✨✨

💡💡💡欢迎大家在评论区留言交流技术以及学习方法、心得方面的问题。💡💡💡

👇🏻👇🏻👇🏻你的一键三连是对我的最大支持❤️❤️❤️
🌟🌟🌟祝大家国庆快乐！！！🌟🌟🌟

​

文章目录

📑前言

本篇主要讲解js中经常用到的计时器，博主将它和轮播图应用场景结合展现

📑正文

📃无缝轮播图

下面展示的是经常能在网页上看到的轮播图效果（博主js学习阶段实现的一个小案例，望不要吐槽🙏🙏🙏）：

由上我们可以观察到轮播图会自动向右切换，也可手动切换，其次当切换到最后一张图片时，再往右切换则会转至第一张，而向左一直切换则会转至最后一张，且转换过程很流畅，前后感觉就紧挨在一起似的，这就是无缝轮播图。其实现方式这里就不展示了，回到我们的主题——计时器，细心的小伙伴可能已经发现当鼠标移动到图片内，将会停止自动切换，而鼠标离开则会继续切换。这就是我们今天所要讲解的计时器。

📃计时器

计时器实现：

let timerId;//声明一个计时器IDfunctionstart(){let duration =1000;if(timerId)return;
  timerId =setInterval(()=>{}, duration);}functionstop(){clearInterval(timerId);
  timerId =null;}

其原理很简单，封装了两个函数，一个是重新开始的函数，一个是暂停函数。需要注意的是

timerId

的声明需要写在两个函数之外。另外，还需注意

timerId

值的清除，即

timerId=null;

不可省略，否则下次调用

start()

，即使计时器已经关闭，但

timerId

仍有值，就无法开启一个新的计时器，

setInterval()

中传的函数就无法执行。

下面通过一个简单演示来加深我们对其原理理解：

实现代码：

📑总结

​本篇内容可能不是很严谨🙏🙏🙏，主要目的是想给大家分享一个在轮播图应用场景下的一个小技巧，希望对大家有所帮助😉😉😉