关于偶数帧解决方案

当总帧数(10帧)为偶数时:

可以将除首帧外的剩余帧切割为三个部分, 分别为: 

var leftItems,        //左边帧

      hideItem,        //中间过渡帧

      rightItems;     //右边帧

假设剩余帧为: 

var surplusItems = xxx.slice(1);

剩余帧总数为: (示意图为例, 剩余9帧)

var surplusTotal = surplusItems.size();    //9

var sliceSize = Math.floor(surplusTotal/2);    //向下取整 4

//切割右边帧

rightItems = surplusItems.slice(0, sliceSize);

//切割中间过渡帧

hideItem = surplusItems.slice(sliceSize, sliceSize + 1);

//切割左边帧

leftItems = surplusItems.slice(sliceSize + 1, surplusTotal);

然后分别设置这三个部分的位置关系: 

左边帧与右边帧的位置关系和奇数帧时候的设置相同

中间过渡帧除了left值之外与第5帧, 第7帧完全相同(见示意图)

left = (整个插件区域宽度 - 它自身宽度)/2;   

具体代码就不贴出来了, 说下大体思路: 

当切换帧的时候(如切换到下一帧), 7 => 6 => 5这样一个过程, 

而这三帧的z-index值相同并都是最低的, 刚好被层级高的帧所遮挡, 

因此视觉上一点都不会察觉.

虽然总体上只呈现出来9张图片, 但是通过轮播切换也能完整的展示10帧图片.

我觉得比老师的方案会稍微好一点, 具体实现代码就靠小伙伴们去实现啦.

我的测试效果是非常好的.

也欢迎大家吐槽, 或许还会有更好的解决方案.

效果图如下: