本文实例讲述了JS实现焦点图轮播效果的方法。分享给大家供大家参考，具体如下：
效果图如下：
一、所用到的知识点
1.DOM操作
2.定时器
3.事件运用
4.Js动画
5.函数递归
6.无限滚动大法
1.先左右按钮功能
2.左右按钮点击的两句话很像，封装成函数
3.无限滚动
①假图的做法
即图片为412341，小于最后一张位置的时候，回到第一张的位置，大于 第一张位置的时候，拉到最后一张的位置
4.小圆点跟着左右按钮切换
5.点击小圆点图片滚动及小圆点切换
①点自己的时候不执行下列代码
②
关键是要取到点击的是第几张图片，不能直接var myIndex=this.index;因为index是自定义属性，dom自带属性可以通过点来获取，自定义属性不行，.getAttribute（）既可以获取自定义属性，又可以获取dom自带属性
③更新index值，index=myIndex;
6.动画函数（有一个渐变的运动过程）
①一个函数不停地在一个条件后调用自身，这种做法就叫做递归，这里通过递归可以实现animate这个函数的动画效果
②不停点就意味着不停调用animate函数，可能会造成卡顿，图片乱刷，需要优化，引进变量animated
7.自动播放
setTimeout只执行一次，之前一直执行，是因为递归
setInterval是每隔多少时间
8.假图的优化
实际运用中，图片肯定是按顺序存放，所以假图最好通过js来生成，而不是本身写在html上
appendChild是将新的节点添加到目标的最后一个子节点之后
insertBefore是将新的节点添加到已存在的子节点之前
cloneNode方法，true表示深克隆，false表示浅克隆，深克隆是将标签和标签里的内容都复制过来，而浅克隆不复制内容
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》、《》、《》及《》
希望本文所述对大家JavaScript程序设计有所帮助。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。