css js 实现悬停控制视频轮播_jq鼠标悬停播放视频-程序员宅基地

技术标签： css 悬停控制 css & html & js 视频轮播 jquery

基于css + jQuery 配合实现可悬停控制视频轮播代码。这是一款可悬停切换全屏轮播jQuery幻灯片。本例有四个视频，对应四个悬停按钮框与下方的文字简介效果图如下：

html 代码：

<!DOCTYPE html>
<html>
<head>
    <title>视频轮播</title>
    <meta name="Keywords" content="基于 css + jQuery 配合 实现可悬停控制视频轮播代码"/>
    <!-- 页面通用的 header 配置 -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    
    <link rel="stylesheet" href="/css/content.css" />
    <script type="text/javascript" src="/js/jquery.min.js"></script>
</head>
<body>
    <div class="wrap">
        <div class="section mhide" id="skill">
            <div class="cover">
                <div class="operation">
                    <div class="item" data-skill="Fire while moving, never be a motionless target"><img src="http://cdn.phoenixos.com/img/octopus/skill_move_deeb6c0.png">Hit&amp;Run</div>
                    <div class="item" data-skill="Lean out and shoot from cover, returns to cover fast"><img src="http://cdn.phoenixos.com/img/octopus/skill_evade_6640115.png">Flanking</div>
                    <div class="item" data-skill="Bouncing up and down in close contact makes enemy lose target"><img src="http://cdn.phoenixos.com/img/octopus/skill_year_4a4d2e4.png">Dropshot</div>
                    <div class="item" data-skill="Aim with crossair then scope in and fire simultaneously"><img src="http://cdn.phoenixos.com/img/octopus/skill_scope_90ecde1.png">Quickscope</div>
                </div>
                <div class="desc">Fire while moving, never be a motionless target</div>
            </div>
            <div class="video-group">
                <video class="video" src="http://files.phoenixos.com/img/move_comp.mp4" style="display: inline;"></video>
                <video class="video" src="http://files.phoenixos.com/img/evade_comp.mp4" style="display: none;"></video>
                <video class="video" src="http://files.phoenixos.com/img/year_comp.mp4" style="display: none;"></video>
                <video class="video" src="http://files.phoenixos.com/img/scope_comp.mp4" style="display: none;"></video>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="/js/video-player.js"></script>
</body>
</html>

这里的视频图片都是外链其他网站的，可自行替换为自己的链接

content.css 代码：

#skill {
    position: relative;
    text-align: center;
}
#skill .cover {
    position: absolute;
    z-index: 1;
    width: 100%;
    min-height: 100%;
}
#skill .cover h1 {
    font-size: 48px;
    padding-top: 35px;
    text-align: center;
    color: #fff;
}
#skill .cover .operation {
    position: absolute;
    bottom: 55px;
    width: 100%;
    max-width: 700px;
    left: 0;
    right: 0;
    margin: auto;
    text-align: justify;
    font-size: 0;
    border: 2px solid #fff;
}
.desc {
    font-size: 22px;
    font-weight: 200;
    line-height: 1.4;
}
#skill .cover .desc {
    position: absolute;
    bottom: 15px;
    width: 100%;
    font-size: 24px;
    text-align: center;
    color: #fff;
}
#skill .cover .item {
    cursor: pointer;
    display: inline-block;
    box-sizing: border-box;
    width: 25%;
    font-size: 18px;
    line-height: 40px;
    border-left: 2px solid #fff;
    color: #fff;
}
#skill .cover .item:first-child {
    border-left: 0;
}
#skill .cover .operation:after {
    content: '';
    display: inline-block;
    width: 100%;
    font-size: 0;
    line-height: 0;
}
#skill .cover .item img {
    vertical-align: middle;
    margin: 0 7px 0 20px;
    max-width: 100%;
}
#skill .cover .item:hover {
    background-color: #000;
}
#skill .video-group .img {
    vertical-align: middle;
    max-width: 100%;
}
#skill .video-group video {
    max-width: 100%;
    vertical-align: middle;
}

video-player.js 代码：

$(function(){
    //播放第一个视频并设置为循环播放
    $('.video')[0].play();
    $('.video')[0].loop = true;

    //设置鼠标悬停在按钮框的事件
    $("#skill .cover .operation .item").on("mouseover",function(){
        //替换显示的视频简介
        $("#skill .cover .desc").html(this.getAttribute('data-skill'));
        var index = $("#skill .cover .operation .item").index(this);
        
        //先隐藏所有视频，再显示选中需要播放的视频
        $(".video").css("display","none");
        $(".video:eq("+index+")").css("display","inline");
		
        //循环遍历暂停所有的视频播放
        $(".video").each(function(){
            var v_index = $(".video").index(this); 
            $('.video')[v_index].pause();
        });
		
        //播放选中的视频并设置为循环播放
        $('.video')[index].play();
        $('.video')[index].loop = true;
    });
});

到此jquery实现悬停控制视频轮播就结束了，jquery框架代码需自行下载，本例中的所有文件路径都需替换为自己实际的路径

本文链接：https://blog.csdn.net/yk_ang_ang/article/details/89228568

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

7-10 集合划分 (10 分)_7个元素的集合有多少种划分-程序员宅基地

文章浏览阅读973次，点赞3次，收藏3次。当n=4 时，集合{1,2,3,4}可以划分为15个不同的非空子集如下：{{1}，{2}，{3}，{4}}，{{1，2}，{3}，{4}}，{{1，3}，{2}，{4}}，{{1，4}，{2}，{3}}，{{2，3}，{1}，{4}}，{{2，4}，{1}，{3}}，{{3，4}，{1}，{2}}，{{1，2}，{3，4}}，{{1，3}，{2，4}}，{{1，4}，{2，3}}，{{1，2，3}，{4}}，{{1，2，4}，{3}}，{{1，3，4}，{2}}，{{2，3，4}_7个元素的集合有多少种划分

全网唯一的echarts树状图——单个节点样式修改_echarts 怎么在修改节点文本使用dom模板-程序员宅基地

文章浏览阅读6.2k次，点赞3次，收藏11次。前段时间一直在用Echarts做一个树状图，本来是挺简单的，Echarts官网也有，不过官网上的节点数据是封装在一个Json文件中去，这里就不再赘述，有兴趣自行去官网查看链接：https://echarts.apache.org/examples/zh/editor.html?c=tree-basicJson数据链接：https://echarts.apache.org/examples/da..._echarts 怎么在修改节点文本使用dom模板

php include传参数,解决PHP的include带参数的有关问题-程序员宅基地

文章浏览阅读1k次。php的include可以载入一个外部php文件，其参数是一个文件名，既然是文件名，就不能带参数了。php中，如果include载入的文件一定要带参数，就只有一种办法，即这个参数是一个全路径的URL地址。例如：include "http://localhost/aaa.php?id=1";　//正确include "aaa.php?id=1";　//错误其实include本义就只是用来载入一个外部..._php include 传参

iOS越狱开发常用检测Hook 代码闪退检测断点_ios hook exit-程序员宅基地

文章浏览阅读1.8k次。__attribute__((constructor)) static void entry(){ rebind_symbols((struct rebinding[1]){{"abort", abort_hook, (void *)&abort_old}}, 1); rebind_symbols((struct rebinding[2]){{"exit", ..._ios hook exit

python转dll_python调用dll方法-程序员宅基地

文章浏览阅读376次。【转载】python调用dll方法python调用dll方法来自http://blog.csdn.net/lf8289/article/details/2322550分类：python2008-04-2412:276833人阅读评论(6)收藏举报在python中调用dll文件中的接口比较简单，实例代码如下：如我们有一个test.dll文件，内部定义如下：extern"C"{int__st..._python 转dll 第三方库

hihocoder 1388 Periodic Signal FFT-程序员宅基地

文章浏览阅读204次。最近做了几个FFT的题，实在是如果不记录一下就转头忘了 T T传送门题意：求思路：将上式拆开，那么就变成了，前两项都是固定的值那么我们求的最大值就可以了，n的数据范围为6*1e4，所以要用FFT优化下面是我现在的理解，如果有错还恰巧被大佬看到了，求指出T T如果有两个数组：A：1到n-1；B：1到m-1那么得到的卷积C：1到m+n-2，其中，注意这里