关于偶数帧解决方案-慕课网

首页课程实战体系课手记专栏慕课教程

关于偶数帧解决方案

来源：3-3 偶数帧解决方案

alpacino

2015-05-14 19:38

当总帧数(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帧图片.

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

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

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

效果图如下:

写回答关注

5回答

一只帅蚂蚁

2015-09-09 21:11:56

直接设置的话，值立马就变，所以后面取的值都是一样的，animate设置其实是一个中间变量，会逐渐把取到的值过度过去，所以你懂得..

0 0
一只帅蚂蚁

2015-05-14 22:02:35

不错，很好的实现思路哦

1 0

Goord

老师，我想问下，我使用这个方法后，不知道为什么，按左边按钮 opacity的值有过渡效果，右边按钮就不会。我用CSS直接设置就解决了，但我想知道为什么animate()中的 opacity的值有过渡效果

2015-09-08 21:09:33

共 1 条回复 >
总是战死沙场

2016-09-26 20:57:19

我也是按这个思路实现的，体验还不错。

0 0
Goord

2015-09-08 21:09:04

我使用这个方法后，不知道为什么，按左边按钮 opacity的值有过渡效果，右边按钮就不会。
我用CSS直接设置就解决了，但我想知道为什么animate()中的 opacity的值有过渡效果

0 0
Rhinel

2015-05-26 18:21:54

很好，不过代码会不会略复杂呀

1 0

alpaci...

不会, 只需要对剩余帧数先做一个奇偶判断, 然后分别做不同的切割方式, 如果为偶数则直接分为左右两个部分, 如果为奇数则将剩余帧切割为三个部分(多出一个中间过渡帧). 然后设置各个部分的位置关系. 无论奇偶, 左右两个部分的位置关系设置都是相同的. 只需额外对中间过渡帧做一个判断(该变量是否存在)然后设置其位置关系即可, 不会太复杂, 只需在原来老师的基础上稍作改动即可.

2015-05-28 11:55:55

共 1 条回复 >