黑马商城项目_banner动画效果

1、图片1在最后面的作用？

向左滑动到最后一图，即图片1，根据tounchEnd事件将当前图片的显示位置设置为第二张图片的位置，即前面的图片1，这样给用户的感觉是个轮转！

2、图片8在最前面的作用？

（1）向右滑动到图片1，再右互动显示图片8，根据touchEnd事件将当前图片的显示位置设置为第八张图片的位置，即后面的图片8，这样给用户的感觉是个轮转！

3、banner自动向左滑动

（1）共计8张图片 排列顺序： 8 1 2 3 4 5 6 7 8 1
（2）index：图片指针取值0到9，分别对应：第0张，第1张……第9张图片
（3）定时器：初始i值为1，循环开始i为2显示第2张、i为3显示第3张……i为8显示第8张、i为9显示第9张，即：“后1”图片
显示第9张的过渡效果一结束，马上执行“transitionEnd”事件：将index设置为1，清除过渡效果、将banner移动到显示“前1”图片的位置。

4、banner向右滑动

（1） 当前i值为1，显示第1张图；向右滑动可以显示第8张，再向右滑动就是空白
（2）划动距离（终点-始点）X坐标，向右滑动距离为正数、向左滑动距离为负数
（3）根据距离的大小确定是否“回到初始状态 | 滑动到前一页”

5、point设置问题

根据当前index的值：实际取值范围1—8；设置point即可！

总结

1、定时器作用：利用定时器实现屏幕自动滚动
2、imgBox添加touchStart touchMove touchEnd 事件
开始：清除计时器、记录初始点位置
移动：根据手指滑动的位置，动态设置显示图片的位置（横向距离）
结束：判断移动距离是否超过屏幕的1/3，条件成立显示上一页或者下一页；否则回弹；重新定义计时器