4.3 视频展示效果实例
4.3 视频展示效果实例
下面通过制作某视频网的视频展示效果，使读者对 jQuery的事件和动画效果有一个更为全面的了解。视频展示效果如图4-28所示。
[插图]
用户可以单击左上角的左右箭头，来控制视频展示的左右滚动。当单击向右箭头时，下面的展示视频会向左滚动隐藏，同时新的视频展示会以滚动方式显示出来。在模拟这个效果之前，需要明确哪些是必须要做的。
- 当视频展示内容处于最后一个版面的时候，如果再向后，则应该跳转到第一个版面。
- 当视频展示内容处于第一个版面的时候，如果再向前，就应该跳转到最后一个版面。
- 左上角的箭头旁边的蓝色圆点应该与动画一起切换，它代表着当前所处的版面。
理清思路后，就可以开始动手制作这个效果。
首先把页面结构设计好，可以把HTML结构简化成如下形式：
[插图]
最终实际页面的HTML代码如下：
[插图]
为页面的HTML代码应用CSS后，初始化页面如图4-29所示。
[插图]
接下来的工作是按照需求编写脚本，来控制页面的交互。
首先通过jQuery选择器获取向右的箭头的元素，然后为它绑定click事件。
因为“向右箭头”和“视频展示区域”在同一个祖先元素下，所以可以通过“向右箭头”来找到“视频展示区域”。首先获取“向右箭头”的祖先元素，然后在祖先元素下寻找“视频展示区域”。
jQuery代码如下：
[插图]
找到相应的元素之后，就可以给相应的元素添加动画效果了。可以通过使用animate()方法控制“视频展示区域”的left样式属性的值来达到动画效果。很容易就可以获取left的值，left的值就等于每个版面的宽度。
可以使用width()方法来获取每个版面的宽度，代码如下：
[插图]
完成这一步后，此时的代码如下：
[插图]
现在的问题是如何知道动画已经到达最后一版。
“视频展示区域”每个版面摆放了4张视频图片，如果能够获取到视频图片的总数，然后用总数除以4就可以得到总的版面数。例如总共有8张视频图片，那么就是2个版面；如果有12张视频图片，那么就是3个版面；如果只有9张视频图片，则必须把小数向上舍入，即3个版面。在还没有到达最后一个版面之前，需要在当前版面数的基础上加1，当到达最后一个版面时（即当前的版面数等于总的版面数），则需要把当前的版面数设置为1，使之重新开始动画效果。
- 首先初始化当前的版面数为1，即第1个版面：
[插图]
然后根据刚才的分析，写出如下代码：
[插图]
这一步完成后，还需要使左上角的箭头旁边的蓝色圆点跟随动画一起切换，来标识当前所处的版面。只需要把样式“current”添加到代表当前版面的“蓝色圆点”上就可以了。
如果想知道当前的版面数，方法很简单，其实前面的代码已经完成了这个任务，变量page的值就是版面数。由于eq()方法的下标是从0开始，因此只要把page减去1就可得到当前的版面数，然后使用下面的代码来标识当前版面：
[插图]
此时，把代码整合，如下所示：
[插图]
运行上面的代码，慢慢地单击向右按钮，并没有发现任何问题，但是如果快速地单击“向右”按钮，就会出现问题了：放开光标，图片还在滚动。
在前面已经介绍过动画队列，这里的问题就是由动画队列引起的。当快速单击“向右”按钮时，单击产生的动画会追加到动画队列中，从而出现放开光标之后，图片还在继续滚动的情况。
为了解决这个问题，可以在动画方法外围加一段判断元素是否处于动画状态的代码，如下所示：
[插图]
如果不处于动画，则给它添加下一个动画。
最终的jQuery代码如下：
[插图]
运行代码后，单击“向右”按钮，效果一切正常。此时已经把“向右”按钮的交互效果完成了。“向左”按钮的交互代码与“向右”按钮类似，区别是在当前的版面数已经为第1版时，如果再往前，则需要把版面跳转到最后一个版面，操作代码如下：
[插图]
此时，效果就完成了，“向右”和“向左”按钮都可以单击，动画效果也能正常运行，并且当前版面也能被标识。效果如图4-30所示。
[插图]