最近在模仿制作小米官网主页,在焦点图轮播上有了困难,以目前的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