实现原理
CSS部分
- 图片容器宽度设置为
图片宽度*图片数量，并将所有图片使用浮动进行水平排列，形成一个滑动轨道； - 对图片容器设置
overflow:hidden将超出容器的内容进行隐藏； - 添加需要的控制播放按钮，放置在合适位置，并进行样式设置。
JavaScript部分
- 为了实现边界滑动，需要在第一张图片前面放置最后一张图片的克隆，在最后一张图片后面放置第一张图片的克隆；
- 重新设置图片容器的宽度，并将需要展示的照片挪到合适位置；
- 为按钮定义函数；
- 在animate切换到克隆图片上时，需要使用CSS设置直接切换到对应图片；
- 为防止重复点击，添加状态锁；
- 设置自动轮播。
在实现渐变轮播时，所有图片都需要全部定位，进行叠加，最后才能实现淡入淡出效果。
抽象出来的接口：
-
playNext()--> 切换到下一张 -
playPre()--> 切换到上一张 -
setBullet()--> 设置状态指示符号 -
autoPlay()--> 自动轮播 -
stopAuto()--> 停止自动轮播
网友评论