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+PHP+Mysql实现抽奖程序
Apr 12 jQuery
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
简单实现jQuery轮播效果
Aug 18 jQuery
jQuery插件artDialog.js使用与关闭方法示例
Oct 09 jQuery
jQuery中将json数据显示到页面表格的方法
May 27 jQuery
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 jQuery
jQuery中$原理实例分析
Aug 13 jQuery
jQuery基于随机数解决中午吃什么去哪吃问题示例
Dec 29 jQuery
jQuery Migrate 插件用法实例详解
May 22 jQuery
jQuery操作选中select下拉框的值代码实例
Feb 07 jQuery
jquery制作的移动端购物车效果完整示例
Feb 24 jQuery
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 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 异常处理实现代码
2009/03/10 PHP
教你如何解密 “ PHP 神盾解密工具 ”
2014/06/20 PHP
php制作圆形用户头像的实例_自定义封装类源代码
2017/09/18 PHP
php 下 html5 XHR2 + FormData + File API 上传文件操作实例分析
2020/02/28 PHP
php中加密解密DES类的简单使用方法示例
2020/03/26 PHP
TP5框架实现上传多张图片的方法分析
2020/03/29 PHP
PHP实现简易用户登录系统
2020/07/10 PHP
js 页面关闭前的出现提示的实现代码
2011/05/25 Javascript
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
2014/08/15 Javascript
Jquery $.getJSON 在IE下的缓存问题解决方法
2014/10/10 Javascript
jquery 插件实现瀑布流图片展示实例
2015/04/03 Javascript
javascript实现动态改变层大小的方法
2015/05/14 Javascript
Jquery使用val方法读写value值
2015/05/18 Javascript
jQuery支持添加事件的日历特效代码分享(3种样式)
2015/08/24 Javascript
Nodejs获取网络数据并生成Excel表格
2020/03/31 NodeJs
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
2016/05/19 Javascript
Angularjs中controller的三种写法分享
2016/09/21 Javascript
JS刷新父窗口的几种方式小结(推荐)
2016/11/09 Javascript
整理一些最近经常遇到的前端面试题
2017/04/25 Javascript
require.js中的define函数详解
2017/07/10 Javascript
vue组件横向树实现代码
2018/08/02 Javascript
vue封装可复用组件confirm,并绑定在vue原型上的示例
2019/10/31 Javascript
python随机取list中的元素方法
2018/04/08 Python
python openvc 裁剪、剪切图片 提取图片的行和列
2019/09/19 Python
python飞机大战pygame碰撞检测实现方法分析
2019/12/17 Python
解决python replace函数替换无效问题
2020/01/18 Python
python 利用panda 实现列联表(交叉表)
2021/02/06 Python
pandas apply使用多列计算生成新的列实现示例
2021/02/24 Python
基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作
2016/01/11 HTML / CSS
加拿大著名的奢侈品购物网站:SSENSE(支持中文)
2020/06/25 全球购物
物业管理应届生求职信
2013/10/28 职场文书
高级编程求职信模板
2014/02/16 职场文书
城管大队整治方案
2014/05/06 职场文书
商场促销活动策划方案
2014/08/18 职场文书
教师党员先进性教育自我剖析材料思想汇报
2014/09/24 职场文书
入党宣誓仪式主持词
2015/06/29 职场文书