- 首先需要一个装所有图片的盒子然后通过移动装图片的盒子来使图片显示出来。
- 需要封装一个移动框架在图片移动时有时间缓冲。
- 如果需要感觉图片移动时连贯的话就需要将第一张图片复制一张到最后面,然后当图片切换到最后一张图片时候立马将图片跳转至第一张,就会给我们一种图片是连贯嘚错觉
- 需要用到的知识点:定位,浮动动画,定时器
// 获取一个图片的宽度 // 无缝链接 克隆第一个节点 // 实现每3s切换一个图片 // 当鼠标移入 定時器停止移除开启定时器 // 点击小圆点切换图片 // 动态的 图片切换 // 给当前图片对应的小圆点 设置样式
其中按钮设置了需要动画播放完成之后,才可以切换下一张图片这样就可以使播放比较连贯。
这里还只是静态的后续也可以通过从后端获取图片资源,动态的创建标签和类然后实现图片轮播。