本文实例为大家分享了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="/UploadFiles/2021-04-02/01.jpg">二、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,视频展示
更新日志
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]