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选择器的原理
Aug 01 jQuery
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
Sep 12 jQuery
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 jQuery
jQuery中ajax获取数据赋值给页面的实例
Dec 31 jQuery
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
jQuery使用动画队列自定义动画操作示例
Jun 16 jQuery
jQuery实现的点击按钮改变样式功能示例
Jul 21 jQuery
jQuery基于随机数解决中午吃什么去哪吃问题示例
Dec 29 jQuery
浅谈JS和jQuery的区别
Mar 27 jQuery
Jquery Datatables的使用详解
Jan 30 jQuery
jQuery插件实现图片轮播效果
Oct 19 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 数组遍历的差异(array_diff 的实现)
2008/03/23 PHP
深入php var_dump()函数的详解
2013/06/05 PHP
symfony表单与页面实现技巧
2015/01/26 PHP
PHP实现的策略模式示例
2019/03/20 PHP
JavaScript Cookie的读取和写入函数
2009/12/08 Javascript
json的前台操作和后台操作实现代码
2012/01/20 Javascript
使用js对select动态添加和删除OPTION示例代码
2013/08/12 Javascript
JavaScript动态改变HTML页面元素例如添加或删除
2014/08/10 Javascript
JavaScript实现的字符串replaceAll函数代码分享
2015/04/02 Javascript
JS实现弹性菜单效果代码
2015/09/07 Javascript
Javascript页面跳转常见实现方式汇总
2015/11/28 Javascript
Javascript将字符串日期格式化为yyyy-mm-dd的方法
2016/10/27 Javascript
Node.js五大应用性能技巧小结(必须收藏)
2017/08/09 Javascript
JS实现手写parseInt的方法示例
2017/09/24 Javascript
浅谈es6 javascript的map数据结构
2017/12/14 Javascript
vue实现循环滚动列表
2020/06/30 Javascript
[43:35]EG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[48:20]OpTic vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
利用python实现命令行有道词典的方法示例
2017/01/31 Python
Python小白必备的8个最常用的内置函数(推荐)
2019/04/03 Python
python选取特定列 pandas iloc,loc,icol的使用详解(列切片及行切片)
2019/08/06 Python
一篇文章搞定Python操作文件与目录
2019/08/13 Python
python针对mysql数据库的连接、查询、更新、删除操作示例
2019/09/11 Python
Python调用C/C++的方法解析
2020/08/05 Python
详解Python 中的容器 collections
2020/08/17 Python
Python定时任务框架APScheduler原理及常用代码
2020/10/05 Python
HTML5 贪吃蛇游戏实现思路及源代码
2013/09/03 HTML / CSS
The North Face北面美国官网:美国著名户外品牌
2018/09/15 全球购物
自我鉴定范文300字
2013/10/01 职场文书
高中毕业自我鉴定
2013/12/22 职场文书
英语系毕业生求职信
2014/07/13 职场文书
乡镇三严三实学习心得体会
2014/10/13 职场文书
2015年会计工作总结范文
2015/05/26 职场文书
优化经济发展环境工作总结
2015/08/11 职场文书
springboot如何接收application/x-www-form-urlencoded类型的请求
2021/11/02 Java/Android
i5-10400f处理相当于i7多少水平
2022/04/19 数码科技