1.移动端轮播图
功能: 1.可以自动播放图片
2.手指可以拖动播放轮播图
classList 属性
classList 属性是HTML5 新增的一个属性,返回元素的类名,但是ie 10 以上版本支持。
该属性用于在元素中添加,移除及切换CSS类。有以下方法:
添加类: element.classList.add( ' 类名 ' ) ;
移除类:element.classList.remove( ' 类名 ' );
切换类:element.classList.toggle( ' 类名 ' );有则删除无则增加
click延时解决方案
移动端click 事件会有300ms延时,原因是移动端屏幕双击会缩放(double tap zoom)页面
解决方案 :
1. 禁用缩放。浏览器禁用默认的双击缩放行为并且去掉300ms的点击延迟
<meta name = "viewport" content = " user -scalable = no">
2.利用touch事件自己封装这个事件解决300ms延迟
原理:1.当我们手指触摸屏幕,记录当前触摸时间
2.当我们手指离开屏幕,用离开的时间减去触摸的时间
3.如果时间小于 150ms ,并且没有滑动过屏幕,那么我们定义为点击
3.使用fastclick 插件解决300ms 延迟
下载网站 :https://github.com/ftlabs/fastclick。
插件的使用
1.fastclick 插件 https://github.com/ftlabs/fastclick。
2. swiper 插件 https://www.swiper.com.cn/
实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。
3. superslide 插件 http://www.superslide2.com/
实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。
4.iscroll插件 https://github.com/cubiq/iscroll