2018-07-02

这是一个视频展示效果，希望使读者对jquery的事件和动画效果有一个更为全面的了解。视频的展示效果如图：

2018-07-02_010609.png

用户可以单击左上角的左右箭头，来控制视频展示的左右滚动，当单击向右箭头时，下面的展示视频会向左滚动隐藏，同时新的视频展示会以滚动方式显示出来。注意：当视频展示内容处于最后一个版面的时候，如果再向后，则应该跳转到第一个版面；当视频展示内容处于第一个版面时，如果再向前，就应该跳转到最后一个版面；左上角的箭头旁边的蓝色圆点，应该与动画一起切换，代表当前所处的版面。首先要把页面结构设计好，html部分

2018-07-02_010805.png

下面就是16个li，存放图片的其次就是一些css样式：

2018-07-02_010834.png

2018-07-02_010846.png

2018-07-02_010902.png

2018-07-02_010913.png

2018-07-02_010934.png

接下来就是按照需求编写脚本，来控制页面的交互首先通过jquery选择器获取向后的箭头的元素，然后为它绑定点击事件。因为“向右的箭头”和“视频展示区域”在同一个祖先元素下，所以可以通过“向右箭头”来找到“视频展示区域”，首先获取“向右箭头”的祖先元素，然后在祖先元素下寻找“视频展示区域”找到相应的元素后，就可以给相应的元素添加动画效果了，可以通过，animate（）方法控制视频展示区域，的left样式属性的值来达到动画效果，很容易就可以获取left的值，left的值就等于每个版面的宽度使用width（）获取每个版面的宽度jquery代码：点击向左箭头是的点击事件：

2018-07-02_011113.png

点击向右箭头的点击事件，和向左的点击事件差不多，只是判断时的不同

2018-07-02_011207.png

注意：javascript的动画跟css密不可分，在上例中，为元素设置合适的css属性也至关重要，比如，我们为“v_content”设置了overflow：hidden position：relative 而后为它的子元素设置了postion：absolute