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");
    });
});

完整代码下载地址：
https://download.csdn.net/download/chenyonken/10530632

最后

以上就是美满野狼为你收集整理的jQuery视频展示效果实例的全部内容，希望文章能够帮你解决jQuery视频展示效果实例所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。