移动端jquery项目 五周年活动页 开发总结

1.动画特效可用animate.css插件，引入后只复制添加动画的class名即可.

2.滚动时才执行动画特效用wow.min.js插件，直接在有动画特效的标签上加入class名wow即可.

3.图片一定要压缩，视频引用外部链接，不然网页加载会很慢很慢。

4.使用swiper插件做轮播图时，本地一切正常，线上和本地显示的轮播图宽度不一样。

原因：swiper是直接在script标签里进行初始化的，没有在页面加载完成后即window.onload里进行初始化，导致上线后页面加载慢时，浏览器计算dom宽高不准确。所以线上和本地显示的轮播图宽度不一样

解决方法：将swiper的初始化代码放在window.onload函数中进行初始化

5.swiper缩略图轮播bug:

缩略图总共有6张，需要一次只同时显示3张，然后自动轮播。此时会有问题，轮播到第4张时，第4张大图轮播正常，但是第4张缩略图不显示，然后继续轮播第5张

原因：swiper插件本身有时会存在布局问题，添加空标签即可解决。（官网说的）

解决方法：添加一个空div标签，添加空标签也不能解决的就网上重新找插件吧

6.swiper做轮播图时如果需要左右按钮，左右按钮不止可以放在轮播图里面，也可以放在轮播图div的外面。