视频展示效果案例

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

视频的展示效果如图：

用户可以单击左上角的左右箭头，来控制视频展示的左右滚动，当单击向右箭头时，下面的展示视频会向左滚动隐藏，同时新的视频展示会以滚动方式显示出来。

注意：

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

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

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

首先要把页面结构设计好，html部分

下面就是16个li，存放图片的

其次就是一些css样式：

接下来就是按照需求编写脚本，来控制页面的交互

首先通过jquery选择器获取向后的箭头的元素，然后为它绑定点击事件。

因为“向右的箭头”和“视频展示区域”在同一个祖先元素下，所以可以通过“向右箭头”来找到“视频展示区域”，首先获取“向右箭头”的祖先元素，然后在祖先元素下寻找“视频展示区域”

找到相应的元素后，就可以给相应的元素添加动画效果了，可以通过，animate（）方法控制视频展示区域，的left样式属性的值来达到动画效果，很容易就可以获取left的值，left的值就等于每个版面的宽度

使用width（）获取每个版面的宽度

jquery代码：

点击向左箭头是的点击事件：

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

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