用JavaScript实现网页无限轮播图效果，附整套源码

用JavaScript实现无限轮播图效果（附源码）

javascript群内每日课题-今日课题：用JavaScript实现无限轮播图效果

PS:很多企业通用的案例自己再学习过程中肯定是要熟练的，所以今天做了这个无限轮播，很多人都担心自己写的代码烂，而不敢去写代码，总想着等自己等写出好的代码再来做游戏，再来练习，其实我的意见是前端新人要多些烂代码，不管你在学习中还是工作中，你不写够足量的烂代码，是无法进化到写好代码的程度，所以练习吧骚年

如果想要更多的企业求职加分项目，案例，游戏源码，可以来一下我的前端群216634437，每天都会精挑细选一个特效，项目游戏出来详细讲解，分享！

知识要点

1.实现无限循环的原理：

以偏移的距离来判断是否跳回第一张和最后一张

也可以利用循环判断图片的当前索引值

2.当前图片轮播的圆点变色显示：

因为每次点击index+1 所以当前的index-1就是button的索引

3.实现动画滚动效果：

原理就是把每次的偏移量分为多次完成比如一次600px那就分为10次每次偏移60px

就要用到setTimeout(go,10);//10毫秒再次调用go函数，一直到不满足条件就停

4.点击圆点按钮执行动画：

原理获取当前的按钮位置再获取要点击的按钮的位置

用（点击的——当前的）*-600=需要跳转的正负距离（向左或向右）

5.自动播放：

给外层容器加个onmouseover事件再调用setInterval方法

想要练习这个案例的进群领取源码：216634437（代码已经上传到群文件，自助下载练习）

头条号里有许多web前端学习视频，企业常用特效/案例/项目，敬请关注！

如果想看到更加系统的文章和学习方法经验可以关注我的微信公众号：‘web前端课程’关注后回复‘给我资料’可以领取一套完整的学习视频