jQuery实现视频展示效果


Posted in jQuery onMay 30, 2020

本文实例为大家分享了jQuery实现视频展示的具体代码,供大家参考,具体内容如下

效果:

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

jQuery实现视频展示效果

思路:

  • 当视频展示内容处于最后一个版面时,如果再向后,则应该跳转到第一个版面
  • 当视频展示内容处于第一个版面时,如果再向前,就应该跳转到最后一个版面
  • 左上角的箭头旁边的蓝色圆点与动画一起切换,它代表当前所处的版面

一、HTML结构

<div class="v_show">
 <div class="v_caption">
 <h2 class="cartoon" title="卡通动漫">卡通动漫</h2>
 <div class="highlight_tip">
  <span class="current">1</span><span>2</span><span>3</span><span>4</span>
 </div>
 <div class="change_btn">
  <span class="prev" >上一页</span>
  <span class="next">下一页</span>
 </div>
 <em><a href="#" >更多>></a></em>
 </div>
 <div class="v_content">
 <div class="v_content_list">
  <ul>
  <li><a href="#" ><img src="img/01.jpg" alt="海贼王" /></a><h4><a href="#" >海贼王</a></h4><span>播放:<em>28,276</em></span></li>
  <!--中间省略-->
  <li><a href="#" ><img src="img/04.jpg" alt="龙珠" /></a><h4><a href="#" >龙珠</a></h4><span>播放 <em>57,865</em></span></li>
  </ul>
 </div>
 </div>
</div>

二、jQuery

(1)首先通过jQuery选择器获取向右的箭头的元素,然后为它绑定click事件。因为“向右箭头”和“视频展示区域”在同一个祖先元素下,所以可以通过“向右箭头”来找到“视频展示区域”。首先获取向右箭头“的祖先元素,然后再祖先元素下寻找”视频展示区域“。

jQuery代码如下

$("span.next").click(function(){ //绑定click事件
  var $parent = $(this).parents("div.v_show");//根据当前点击元素获取到父元素
  var $v_show = $parent.find("div.v_content_list"); //寻找到“视频内容展示区域”
  var $v_content = $parent.find("div.v_content"); //寻找到“视频内容展示区域”外围的DIV元素
})

找到相应的元素后,就可以给相应的元素添加动画效果了,可以通过animate()方法控制”视频展示区域“的left样式属性的值来达到动画效果。left的值就等于每个版面的宽度

可以用width()方法来获取每个版面的宽度

var v_width = $v_content.width();

完成这一步之后,此时的代码如下:

$(function() {
 $("span.next").click(function() {
 var $parent = $(this).parents("div.v_show");
 var $v_show = $parent.find("div.v_content_list"); //找到视屏内容展示区域
 var $v_content = $parent.find('div.v_content'); //找到视频展示区域的外围div
 var v_width = $v_content.width(); //获取区域内容的宽度,带单位

 if (当动画到最后一版面) {
  $v_show.animate({left:'0px'},"slow");
 } else {
  $v_show.animate({left:'-='+v_width},"slow");
 }
 });
});

(2)现在的问题是如何知道动画已经到达最后一版面?”视频展示区域“每个版面摆放了4张视频图片,如果能够获取到视频图片的总数,然后用总数除以4就可以得到总的版面数。在还没有到达最后一个版面之前,需要在当前版面数的基础上加1,当到达最后一个版面时(即当前的版面数等于总的版面数),则需要当前的版面数设置为1,使之重新开始动画。

$(function() {
 var page = 1; //初始化当前版面数,即第一个版面
 var i = 4;
 $("span.next").click(function() {
 var $parent = $(this).parents("div.v_show");
 var $v_show = $parent.find("div.v_content_list"); //找到视屏内容展示区域
 var $v_content = $parent.find('div.v_content'); //找到视频展示区域的外围div
 var v_width = $v_content.width(); //获取区域内容的宽度,带单位
 var len = $v_show.find('li').length; //总的图片数
 var page_count = Math.ceil(len / i); //只要不是整数,就往大的方向取最小的整数
 if (page==page_count) {
  $v_show.animate({left:'0px'},"slow");
 } else {
  $v_show.animate({left:'-='+v_width},"slow");
 }
 });
});

(3)这一步完成,还需要是左上角的箭头旁边的蓝色圆点跟随动画一起切换,来标识当前所处的版面。只需要把样式”current”添加到代表当前版面的“蓝色圆点”上就可以

如果想知道当前的版面数,方法很简单,变量page的值就是版面数。由于eq()是方法的下标是从0开始,因此只要把page减去1就可得到当前的版面数,然后使用下面的代码来表示当前版面:

$parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");

(4)运行当前代码,并没有发现任何问题,但是如果快速地单击“向右”按钮,就会出现问题:放开光标,图片还在滚动。
这里的问题是有动画队列引起的。当快速地单击向右按钮时,单击产生的动画会追加到动画队列中,从而出现上述问题,解决如下:

if( !$v_show.is(":animated") ){ } //判断“视频内容展示区域”是否正在处于动画

最终的jQquery代码如下

$(function(){
 var page = 1;
 var i = 4; //每版放4个图片
 //向后 按钮
 $("span.next").click(function(){ //绑定click事件
  var $parent = $(this).parents("div.v_show");//根据当前点击元素获取到父元素
  var $v_show = $parent.find("div.v_content_list"); //寻找到“视频内容展示区域”
  var $v_content = $parent.find("div.v_content"); //寻找到“视频内容展示区域”外围的DIV元素
  var v_width = $v_content.width() ;
  var len = $v_show.find("li").length;
  var page_count = Math.ceil(len / i) ; //只要不是整数,就往大的方向取最小的整数
  if( !$v_show.is(":animated") ){ //判断“视频内容展示区域”是否正在处于动画
  if( page == page_count ){ //已经到最后一个版面了,如果再向后,必须跳转到第一个版面。
  $v_show.animate({ left : '0px'}, "slow"); //通过改变left值,跳转到第一个版面
  page = 1;
  }else{
  $v_show.animate({ left : '-='+v_width }, "slow"); //通过改变left值,达到每次换一个版面
  page++;
  }
  }
  $parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");
 });
 //往前 按钮
 $("span.prev").click(function(){
  var $parent = $(this).parents("div.v_show");//根据当前点击元素获取到父元素
  var $v_show = $parent.find("div.v_content_list"); //寻找到“视频内容展示区域”
  var $v_content = $parent.find("div.v_content"); //寻找到“视频内容展示区域”外围的DIV元素
  var v_width = $v_content.width();
  var len = $v_show.find("li").length;
  var page_count = Math.ceil(len / i) ; //只要不是整数,就往大的方向取最小的整数
  if( !$v_show.is(":animated") ){ //判断“视频内容展示区域”是否正在处于动画
  if( page == 1 ){ //已经到第一个版面了,如果再向前,必须跳转到最后一个版面。
  $v_show.animate({ left : '-='+v_width*(page_count-1) }, "slow");
  page = page_count;
  }else{
  $v_show.animate({ left : '+='+v_width }, "slow");
  page--;
  }
 }
 $parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");
 });
});

完整代码下载地址:jQuery视频展示

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 jQuery
jquery Ajax实现Select动态添加数据
Jun 08 jQuery
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 jQuery
简单实现jQuery上传图片显示预览功能
Jun 29 jQuery
jquery获取transform里的值实现方法
Dec 12 jQuery
利用jQuery+localStorage实现一个简易的计时器示例代码
Dec 25 jQuery
基于jquery trigger函数无法触发a标签的两种解决方法
Jan 06 jQuery
jQuery中的类名选择器(.class)用法简单示例
May 14 jQuery
jQuery基于随机数解决中午吃什么去哪吃问题示例
Dec 29 jQuery
jQuery无冲突模式详解
Jan 17 jQuery
JQuery实现折叠式菜单的详细代码
Jun 03 jQuery
Jquery ajax书写方法代码实例解析
Jun 12 jQuery
基于JavaScript或jQuery实现网站夜间/高亮模式
May 30 #jQuery
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 #jQuery
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 #jQuery
Jquery高级应用Deferred对象原理及使用实例
May 28 #jQuery
JQuery插件tablesorter表格排序实现过程解析
May 28 #jQuery
jQuery实现鼠标滑动切换图片
May 27 #jQuery
jQuery弹框插件使用方法详解
May 26 #jQuery
You might like
关于在php.ini中添加extension=php_mysqli.dll指令的说明
2007/06/14 PHP
Session保存到数据库的php类分享
2011/10/24 PHP
PHP运行出现Notice : Use of undefined constant 的完美解决方案分享
2012/03/05 PHP
thinkPHP多域名情况下使用memcache方式共享session数据的实现方法
2016/07/21 PHP
laravel 多图上传及图片的存储例子
2019/10/14 PHP
兼容ie和firefox js关闭代码
2008/12/11 Javascript
Javascript Function对象扩展之延时执行函数
2010/07/06 Javascript
一个关于jqGrid使用的小例子(行按钮)
2011/11/04 Javascript
jQuery Deferred和Promise创建响应式应用程序详细介绍
2013/03/05 Javascript
js实现获取焦点后光标在字符串后
2014/09/17 Javascript
基于jquery步骤进度条源码分享
2015/11/12 Javascript
AngularJS上拉加载问题解决方法
2016/05/23 Javascript
深入理解Javascript中的valueOf与toString
2017/01/04 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
2017/02/03 Javascript
php main 与 iframe 相互通讯类(js+php同域/跨域)
2017/09/14 Javascript
jQuery插件实现非常实用的tab栏切换功能【案例】
2019/02/18 jQuery
JS将时间秒转换成天小时分钟秒的字符串
2019/07/10 Javascript
微信小程序自定义联系人弹窗
2020/05/26 Javascript
js实现简单商品筛选功能
2021/02/02 Javascript
Python cookbook(数据结构与算法)实现查找两个字典相同点的方法
2018/02/18 Python
Java实现的执行python脚本工具类示例【使用jython.jar】
2018/03/29 Python
Python使用字典的嵌套功能详解
2019/02/27 Python
Python判断对象是否为文件对象(file object)的三种方法示例
2019/04/26 Python
python实现图片九宫格分割
2021/03/07 Python
Python networkx包的实现
2020/02/14 Python
Python如何执行精确的浮点数运算
2020/07/31 Python
python生成xml时规定dtd实例方法
2020/09/21 Python
中学生学习生活的自我评价
2013/10/26 职场文书
触摸春天教学反思
2014/02/03 职场文书
初中英语演讲稿
2014/04/29 职场文书
设计顾问服务计划书
2014/05/04 职场文书
医生爱岗敬业演讲稿
2014/08/26 职场文书
优秀家长自荐材料
2014/08/26 职场文书
群众路线问题查摆对照检查材料
2014/10/04 职场文书
2014个人年度工作总结范文
2014/12/24 职场文书
Window server中安装Redis的超详细教程
2021/11/17 Redis