轮播图

轮播图

 

1、网页轮播图

- 题目描述

  把课上的网页轮播图写一遍

- 训练目标

  能够独立完成网页轮播图案例,会使用动画函数

- 训练提示

  ​ 1.鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。

  ​ 2.点击右侧按钮一次，图片往左播放一张，以此类推，左侧按钮同理。

  ​ 3.图片播放的同时，下面小圆圈模块跟随一起变化。

  ​ 4.点击小圆圈，可以播放相应图片。

  ​ 5.鼠标不经过轮播图，轮播图也会自动播放图片。

  ​ 6.鼠标经过，轮播图模块， 自动播放停止。

 

 

2、移动端轮播图

- 题目描述

   把今天课上讲的携程的轮播图写一遍

- 训练目标

  能够独自完成移动端轮播图的制作

- 训练提示

  1.把轮播图中的第一张和最后一张分别复制一份放到前后

  2.先做页面自动轮播效果, 利用translate移动

  3.添加检测过渡完成事件  transitionend 来完成无缝滚动 

  4.利用classList完成li的小圆点切换

  5.利用touchstart,touchmove, touchend来完成手指移动轮播图