现在的网页中，焦点图几乎是一块必备的元素了，无论淘宝，百度，还是腾讯，到处可见焦点图或是轮播图的身影，如果每次都是重头写一遍js，那未免太麻烦，多写几次估计都能背下来了。但在工作中，有时候效率很重要，对代码进行适当的封装可以使我们的工作事半功倍。

下面是一个我自己封装的焦点轮播图插件。功能方面，可左右翻页，可点击小的控制按钮翻页，当然，考虑到有时候设计图并没有这些元素，插件也自然把这两项功能封装成了可有可无。可控制循自动播放时间间隔和每次滚动所用时间，以及是否自动播放。调用方法如下：

当然，针对这个插件，有一个局限性，就是布局是固定结构的，这里所说的固定，是为了保证所有元件都在选择的ID盒子中，以实现多个轮播块之间互不影响。整体的布局应遵循下面这个层级关系。

样式方面，有几个相对定位和绝对定位也是必须的，这个我想大家都知道，不通过定位，是无法实现移动效果的，只能实现渐隐与渐现之类。之所以没把绝对定位的盒子层放到js中去自动添加，是为了防止当网页中该js文件加载失败时，焦点图的整个布局还是保持着一种良好的视觉，只是没有滚动而已，以不至于整个页面给人一种差的用户体验。样式部分：

其实这部分是完全没必要贴出来的，因为设计图不同，样式就不同，贴出来的目的，无非是让前来阅读的人知道前面所说的那几个相对定位和绝对定位的关系。

 

后注：本人学js才一年多，上面的代码全部由我自己编写的网页中复制过来，代码能力可谓初出茅庐，如新手有看不懂的，还望理解，如果是大牛，莫见笑。当然了，大牛应该是不会看这种文章的，幻灯片这种小功能，闭着眼睛都能实现。

 

下面附上插件源码，如果有需要的朋友，还望在使用过程当中保留版权为谢。