- 无缝轮播中每一个元素是独立的。
- 思路:挨着的元素分块,给一个块区的元素同时同一个方向的动画
- 每一张图片的状态有四种:在屏幕中current、离开leave、进入enter(包括站队stay)。
- 用js控制每一张图片图片的三种状态之间切换
- 总结规律:for循环,比如三张图的话
function x(n){
if(n>3){
n = n%3
if(n===0){
n = 3
}
}
return n
//n = 1,2,3
},
- 用正交 —— 内容、样式、行为分离,互不干扰
- 无缝轮播就是状态机,每一个元素有几种不同的状态,不同状态之间换来换去而已。
无缝轮播实例:
无缝轮播