# mobile_banner

**Repository Path**: bingohello/mobile_banner

## Basic Information

- **Project Name**: mobile_banner
- **Description**: 移动端卡片式banner切换
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2018-01-23
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# mobile_banner
移动端卡片式banner切换
## 需求
> 1.通过手指控制banner上下切换

> 2.当banner处在第一张时，不允许下拉切换

> 3.当banner处在最后一张时，不允许上拉切换

> 4.上拉时，所有图片根据上拉的增量自动调整上拉高度，当抽屉中的图片上拉到height/4高度时不在向上偏移，置顶的图片继续随增量调整上拉高度

> 5.上拉增量超过height时，抽屉中的第二张图片以1.5倍速率调整向上偏移
## 1.基本布局、样式
	<a href="javascript:" style="z-index:0">
        <p>发布会</p>
        <h1>3D随心定制</h1>
        <img src="img/1.png" />
    </a>
## 2.事件
### 2.1 touchstart
触摸开始

#### 2.1.1 获取接触点的y坐标
startY : 触摸目标在页面中的y坐标
#### 2.1.2 计算出当前触摸点处在第几个banner
场景：
>1.上滑，步数step = 当前手指接触banner索引 - 当前屏幕置顶的banner索引
>
>2.下滑，步数step = 1;（固定）
### 2.2 touchmove
接触点改变，实时触发

场景：
> 1.根据手指滑动距离计算抽屉中图片应该滑动的高度

> 2.置顶的图片随滑动增量自动偏移

> 3.抽屉中第一张图片上滑时随滑动增量偏移，下拉时限制最大下拉增量不超过height/4

> 4.在置顶图片上方的图片随滑动增量偏移

> 5.当上拉增量超过height时，抽屉中的第二张图片以1.5倍速率向上偏移

> 6.抽屉中从第二张图片开始，下拉时限制最大下拉增量不超过height/4
### 2.3 touchend
触摸结束
#### 2.3.1 获取最后接触点的y坐标
endY : 触摸目标在页面中的y坐标

场景：
> 1.步数step等于0，startY-endY>0 (上滑), step = 1;
> 
> 2.步数step等于0，startY-endY>0 (点击)
> 
> 3.步数step大于0
> >上滑：currentIndex += step;
> 
> >下滑：currentIndex--