Question

下面通过制作某视频网的视频展示效果，使读者对jQuery的事件和动画效果有一个更为全面的了解。视频展示效果如图4-28所示。

图4-28　视频展示效果

用户可以单击左上角的左右箭头，来控制视频展示的左右滚动。当单击向右箭头时，下面的展示视频会向左滚动隐藏，同时新的视频展示会以滚动方式显示出来。在模拟这个效果之前，需要明确哪些是必须要做的。

　当视频展示内容处于最后一个版面的时候，如果再向后，则应该跳转到第一个版面。

　当视频展示内容处于第一个版面的时候，如果再向前，就应该跳转到最后一个版面。

　左上角的箭头旁边的蓝色圆点应该与动画一起切换，它代表着当前所处的版面。

理清思路后，就可以开始动手制作这个效果。

首先把页面结构设计好，可以把HTML结构简化成如下形式：

最终实际页面的HTML代码如下：

为页面的HTML代码应用CSS后，初始化页面如图4-29所示。

图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所示。

图4-30　动画效果

注意：JavaScript的动画效果跟CSS密不可分，在上例中，为元素设置合适的CSS属性也至关重要，比如，我们为v_content设置了overflow: hidden; position: relative;，而后为它的子元素设置了position: absolute;。