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 相关文章推荐
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
基于jQuery实现的单行公告活动轮播效果
Aug 23 jQuery
jquery插件开发之选项卡制作详解
Aug 30 jQuery
jQuery中过滤器的基本用法示例
Oct 11 jQuery
jQuery响应滚动条事件功能示例
Oct 14 jQuery
jQuery中的类名选择器(.class)用法简单示例
May 14 jQuery
jQuery实现模糊搜索功能的方法分析
Jun 29 jQuery
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 jQuery
jQuery实现高级检索功能
May 28 jQuery
基于jQuery的时间戳与日期间的转化
Jun 21 jQuery
jQuery实现简单评论区功能
Oct 26 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
discuz安全提问算法
2007/06/06 PHP
php页面消耗内存过大的处理办法
2013/03/18 PHP
php批量添加数据与批量更新数据的实现方法
2014/12/16 PHP
PHP实现过滤各种HTML标签
2015/05/17 PHP
PHP curl批处理及多请求并发实现方法分析
2018/08/15 PHP
JavaScript 常用函数
2009/12/30 Javascript
网页中可关闭的漂浮窗口实现可自行调节
2013/08/20 Javascript
巧用replace将文字表情替换为图片
2014/04/17 Javascript
JavaScript淡入淡出渐变简单实例
2015/08/06 Javascript
去除字符串左右两边的空格(实现代码)
2016/05/12 Javascript
JavaScript必知必会(七)js对象继承
2016/06/08 Javascript
微信小程序js文件改变参数并在视图上及时更新【推荐】
2018/06/11 Javascript
vue页面切换项目实现转场动画的方法
2019/11/12 Javascript
[41:08]2014 DOTA2国际邀请赛中国区预选赛 HGT VS NE
2014/05/22 DOTA
Python简单实现的代理服务器端口映射功能示例
2018/04/08 Python
python读取文本绘制动态速度曲线
2018/06/21 Python
django ManyToManyField多对多关系的实例详解
2019/08/09 Python
使用PyQt5实现图片查看器的示例代码
2020/04/21 Python
python实现人性化显示金额数字实例详解
2020/09/25 Python
CSS3的文字阴影—text-shadow的使用方法
2012/12/25 HTML / CSS
html5使用html2canvas实现浏览器截图的示例
2017/08/31 HTML / CSS
美国球鞋寄卖网站:Stadium Goods
2018/05/09 全球购物
几个人围成一圈的问题
2013/09/26 面试题
EJB timer的种类
2014/10/28 面试题
内科护士实习自我鉴定
2013/10/17 职场文书
培训主管的岗位职责
2013/11/23 职场文书
2014的自我评价
2014/01/13 职场文书
社区母亲节活动方案
2014/03/05 职场文书
物理学专业求职信
2014/07/04 职场文书
公司领导班子对照材料
2014/08/18 职场文书
党的群众路线教育实践活动实施方案
2014/10/31 职场文书
祝寿主持词
2015/07/02 职场文书
2016年毕业实习心得体会范文
2015/10/09 职场文书
Nginx工作原理和优化总结。
2021/04/02 Servers
OpenStack虚拟机快照和增量备份实现方法
2022/04/04 Servers
Python sklearn分类决策树方法详解
2022/09/23 Python