jQuery實現(xiàn)視頻展示效果

更新時間：2020年05月30日 16:28:34 作者：彈指間

這篇文章主要為大家詳細(xì)介紹了jQuery實現(xiàn)視頻展示效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了jQuery實現(xiàn)視頻展示的具體代碼，供大家參考，具體內(nèi)容如下

效果：

用戶可以單擊左上角的左右箭頭，來控制視頻展示的左右滾動。當(dāng)單擊向右箭頭時，下面的展示視頻會向左滾動，同時新的視頻展示會以滾動方式顯示出來。

思路：

當(dāng)視頻展示內(nèi)容處于最后一個版面時，如果再向后，則應(yīng)該跳轉(zhuǎn)到第一個版面
當(dāng)視頻展示內(nèi)容處于第一個版面時，如果再向前，就應(yīng)該跳轉(zhuǎn)到最后一個版面
左上角的箭頭旁邊的藍(lán)色圓點與動畫一起切換，它代表當(dāng)前所處的版面

一、HTML結(jié)構(gòu)

<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事件。因為“向右箭頭”和“視頻展示區(qū)域”在同一個祖先元素下，所以可以通過“向右箭頭”來找到“視頻展示區(qū)域”。首先獲取向右箭頭“的祖先元素，然后再祖先元素下尋找”視頻展示區(qū)域“。

jQuery代碼如下

$("span.next").click(function(){ //綁定click事件
  var $parent = $(this).parents("div.v_show");//根據(jù)當(dāng)前點擊元素獲取到父元素
  var $v_show = $parent.find("div.v_content_list"); //尋找到“視頻內(nèi)容展示區(qū)域”
  var $v_content = $parent.find("div.v_content"); //尋找到“視頻內(nèi)容展示區(qū)域”外圍的DIV元素
}）

找到相應(yīng)的元素后，就可以給相應(yīng)的元素添加動畫效果了，可以通過animate()方法控制”視頻展示區(qū)域“的left樣式屬性的值來達(dá)到動畫效果。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"); //找到視屏內(nèi)容展示區(qū)域
 var $v_content = $parent.find('div.v_content'); //找到視頻展示區(qū)域的外圍div
 var v_width = $v_content.width(); //獲取區(qū)域內(nèi)容的寬度，帶單位

 if (當(dāng)動畫到最后一版面) {
  $v_show.animate({left:'0px'},"slow");
 } else {
  $v_show.animate({left:'-='+v_width},"slow");
 }
 });
});

（2）現(xiàn)在的問題是如何知道動畫已經(jīng)到達(dá)最后一版面？”視頻展示區(qū)域“每個版面擺放了4張視頻圖片，如果能夠獲取到視頻圖片的總數(shù)，然后用總數(shù)除以4就可以得到總的版面數(shù)。在還沒有到達(dá)最后一個版面之前，需要在當(dāng)前版面數(shù)的基礎(chǔ)上加1，當(dāng)?shù)竭_(dá)最后一個版面時（即當(dāng)前的版面數(shù)等于總的版面數(shù)），則需要當(dāng)前的版面數(shù)設(shè)置為1，使之重新開始動畫。

$(function() {
 var page = 1; //初始化當(dāng)前版面數(shù)，即第一個版面
 var i = 4;
 $("span.next").click(function() {
 var $parent = $(this).parents("div.v_show");
 var $v_show = $parent.find("div.v_content_list"); //找到視屏內(nèi)容展示區(qū)域
 var $v_content = $parent.find('div.v_content'); //找到視頻展示區(qū)域的外圍div
 var v_width = $v_content.width(); //獲取區(qū)域內(nèi)容的寬度，帶單位
 var len = $v_show.find('li').length; //總的圖片數(shù)
 var page_count = Math.ceil(len / i); //只要不是整數(shù)，就往大的方向取最小的整數(shù)
 if (page==page_count) {
  $v_show.animate({left:'0px'},"slow");
 } else {
  $v_show.animate({left:'-='+v_width},"slow");
 }
 });
});

（3）這一步完成，還需要是左上角的箭頭旁邊的藍(lán)色圓點跟隨動畫一起切換，來標(biāo)識當(dāng)前所處的版面。只需要把樣式”current”添加到代表當(dāng)前版面的“藍(lán)色圓點”上就可以

如果想知道當(dāng)前的版面數(shù)，方法很簡單，變量page的值就是版面數(shù)。由于eq()是方法的下標(biāo)是從0開始，因此只要把page減去1就可得到當(dāng)前的版面數(shù)，然后使用下面的代碼來表示當(dāng)前版面：

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

（4）運行當(dāng)前代碼，并沒有發(fā)現(xiàn)任何問題，但是如果快速地單擊“向右”按鈕，就會出現(xiàn)問題：放開光標(biāo)，圖片還在滾動。
這里的問題是有動畫隊列引起的。當(dāng)快速地單擊向右按鈕時，單擊產(chǎn)生的動畫會追加到動畫隊列中，從而出現(xiàn)上述問題，解決如下：

if( !$v_show.is(":animated") ){ } //判斷“視頻內(nèi)容展示區(qū)域”是否正在處于動畫

最終的jQquery代碼如下

$(function(){
 var page = 1;
 var i = 4; //每版放4個圖片
 //向后 按鈕
 $("span.next").click(function(){ //綁定click事件
  var $parent = $(this).parents("div.v_show");//根據(jù)當(dāng)前點擊元素獲取到父元素
  var $v_show = $parent.find("div.v_content_list"); //尋找到“視頻內(nèi)容展示區(qū)域”
  var $v_content = $parent.find("div.v_content"); //尋找到“視頻內(nèi)容展示區(qū)域”外圍的DIV元素
  var v_width = $v_content.width() ;
  var len = $v_show.find("li").length;
  var page_count = Math.ceil(len / i) ; //只要不是整數(shù)，就往大的方向取最小的整數(shù)
  if( !$v_show.is(":animated") ){ //判斷“視頻內(nèi)容展示區(qū)域”是否正在處于動畫
  if( page == page_count ){ //已經(jīng)到最后一個版面了,如果再向后，必須跳轉(zhuǎn)到第一個版面。
  $v_show.animate({ left : '0px'}, "slow"); //通過改變left值，跳轉(zhuǎn)到第一個版面
  page = 1;
  }else{
  $v_show.animate({ left : '-='+v_width }, "slow"); //通過改變left值，達(dá)到每次換一個版面
  page++;
  }
  }
  $parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");
 });
 //往前 按鈕
 $("span.prev").click(function(){
  var $parent = $(this).parents("div.v_show");//根據(jù)當(dāng)前點擊元素獲取到父元素
  var $v_show = $parent.find("div.v_content_list"); //尋找到“視頻內(nèi)容展示區(qū)域”
  var $v_content = $parent.find("div.v_content"); //尋找到“視頻內(nèi)容展示區(qū)域”外圍的DIV元素
  var v_width = $v_content.width();
  var len = $v_show.find("li").length;
  var page_count = Math.ceil(len / i) ; //只要不是整數(shù)，就往大的方向取最小的整數(shù)
  if( !$v_show.is(":animated") ){ //判斷“視頻內(nèi)容展示區(qū)域”是否正在處于動畫
  if( page == 1 ){ //已經(jīng)到第一個版面了,如果再向前，必須跳轉(zhuǎn)到最后一個版面。
  $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視頻展示

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: