第二十一章 轮播图
轮播图
分析:
复制元素(可以不用js来实现)
=> 原因:就是当最后一张走完的时候会出现留白的现象
=> 为了增加体验效果 , 我们会把第一张复制一份放到最后面
=> 把最后一张复制一份放到最前面
设置焦点
=> 我们的焦点需要比我们的图片少2个
自动轮播
=> 就是需要让图片动起来
=> 需要使用到定时器
=> 需要使用反复性定时器
=> 第一次运动 : -1 * bannerBox.clientWidth
=> 第二次运动 : -2 * bannerBox.clientWidth
=> 第三次运动 : -3 * bannerBox.clientWidth
运动结束
=> 我们也写成函数的形式
=> 这个函数不是上来就调用的
=> 当到了最后一张的时候我们要让图片回到对应位置
=> 焦点也需要跟着移动
=> 图片的索引: 0 1 2 3 4 5 6
=> 焦点的索引: 0 1 2 3 4
移入移出
=> 移入: 就是停止自动轮 , 需要关闭定时器
=> 移出: 自动轮播开始工作 , 再次调用我们的自动轮播的函数
点击切换
=> 就是在点击 左右按钮的时候能切换图片
=> 我们在点击焦点的时候也能到达指定的图片
=> 实现方式
-> 第一种: 单独获取 , 单独设置
-> 第二种: 事件委托的方式
- 1
- 2
- 3
- 4
- 5
<>其中调用的运动函数在上一节