本文例項為大家分享了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");
  }
 });
});

（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視訊展示

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。