【myfocus】一款好用的焦点图轮播插件

最近在模仿制作小米官网主页，在焦点图轮播上有了困难，以目前的js水平并不能完成，所以在网上找了一款插件myfocus

这款插件提供了丰富的焦点图轮播样式，myfocus-2.0.1.min.js只有不到10kb大小，里面的样式js文件+css文件都在2kb,3kb左右，非常轻。

在网上学习教程后，我便把他用到我的项目中。刚开始的问题确实很多，按照教程的来依然实现不了效果

针对问题，我修改了自己布局上的缺陷，使布局符合myfocus布局要求。

针对小米网焦点图的样式，我修改了myfocus提供的css文件，改了颜色，自己做了背景图片更换，使他更能接近项目模版

测试了不同版本浏览器的兼容性，效果都很好，唯有一点问题，在打开页面后，轮播样式要等2-3秒的延迟后才会显示，就是说刚打开页面时，虽然焦点图已经显示，但作为轮播的一部分，下面的小点，与左右两边的按钮都没有显示，上网搜索后，在myfocus教程的常见问题里找到这么一句

“能不能刷新网页直接就开始播放啊？怎么设置？

设置它的“loadIMGtimeout”为0即可，即不等myFocus的图片加载完就直接播放。”

这不正是我所需要的吗，把他放在代码中，发现根本没有效果，在myfocus-2.0.1.min.js里搜索loadIMGtimeout，发现原来是作者的笔误，应该是loadIMGTimeout，其实也应该想到，他并没有符合标准驼峰式代码书写，修改后大功告成。

总结一下，使用插件会大大加快项目制作的速度，但比较单一。随着js的深入理解，应该自己写出代码。在以后的项目中，可以自己写出插件，完成一个项目的各个功能，而且自己写的维护起来也很容易。

最后放上链接【myfocus】  http://demo.jb51.net/js/myfocus/demo.html