1. 轮播的实现原理是怎样的？
Paste_Image.png
如上图所示，黑色的为显示区域，后面的红色矩形只有在黑色框内才能显示，其他时刻均不可见。那么只用控制红色矩形的左右位置，就可以实现黑色框内的内容切换显示了。
2.可以抽象出哪些接口？
可以把核心功能切换图片抽象出来，比如定义一个slider(index),用来控制图片内容的左右滚动。将所有图片放在一个容器里，一行排列，当slider(0)的时候，容器的位置不发生改变，当slider(1)的时候，容器位置向左便宜一个图片宽度。
3.渐变切换的思路
slider(index)要改造成上一张渐隐，下一张渐现。
css需要把每一个图片的position 设置为非static的属性，这样可以让图片堆叠在一起。然后将图片的display为none
不需要对需要渐变切换的图片进行一行排列，因为当display为none之后，并不会占据文档流，所以排列没有意义。如果排列了反而会有一个副作用就是渐变切换会不流畅。会出现这样的效果点我查看。如果一定要一行排列了，而且就是不想改css，那么可以把 fadeIn的执行放在fadeOut的回调里点我查看代码
网友评论