网页视频轮播video |
您所在的位置：网站首页 › 网页设计如何添加视频 › 网页视频轮播video |
网页视频轮播video
|
最近，在项目的实际开发中，有遇到UI设计的视频轮播的效果，在实际解决之前，在网上查找了相关资料，有看到一篇CDSN的博客，有所启发，现根据实际遇到的问题，做如下记录。 一、实例相关情况介绍 参考的实例效果如下所示： 首先，总共有5个视频进行展示，点击左右按钮可以进行轮播切换，当前视频始终位于最上层，并且居中显示，div尺寸最大，第二层尺寸缩小，第三层再缩小显示。 二、运用的实例代码  教学视频
雄厚的师资力量是选择教育机构的重要因素
您的浏览器不支持HTML5视频播放，请升级浏览器。
您的浏览器不支持HTML5视频播放，请升级浏览器。
您的浏览器不支持HTML5视频播放，请升级浏览器。
您的浏览器不支持HTML5视频播放，请升级浏览器。
您的浏览器不支持HTML5视频播放，请升级浏览器。
.teaching-video{
background-color:#ffffff;
padding-top:50px;
padding-bottom:50px;
}
.teaching-video .tea-video-title{
margin:20px auto 50px;
}
.teaching-video .tea-video-title .tea-video-h1{
font-size:30px;
color:#ef7700;
height:50px;
line-height:50px;
}
.teaching-video .tea-video-title .tea-video-h3{
font-size:16px;
color:#666666;
}
.teaching-video .tea-video-cont{
margin-bottom:50px;
}
.teaching-video li{list-style: none;}
.video{width:1200px;margin:0 auto;overflow: hidden;zoom:1;background: #ffffff;}
.video>div{float: left;height: 400px;}
.video>div:first-child {width: 5%;background: url(../images/video-btn-l.png) center center no-repeat;}
.video>div:last-child {width: 5%;background: url(../images/video-btn-r.png) center center no-repeat;}
.video>div:nth-of-type(2){width: 90%;}
.video ul{position: relative;}
.video li{transition: all .6s; position: absolute;background: url(../images/video-bg.png) center center no-repeat;background-size: 100% 100%;}
/*.video li>div{padding: 1% 1% 4%;}*/
.video li video{width:100%;height:100%;}
.video li h3{text-align: center;margin-top: 2px;color: #1766d7;}
.video li:nth-of-type(1) video{background: url(../images/video03.jpg) no-repeat;background-size: cover;}
.video li:nth-of-type(2) video{background: url(../images/video01.jpg) no-repeat;background-size: cover;}
.video li:nth-of-type(3) video{background: url(../images/video02.jpg) no-repeat;background-size: cover;}
.video li:nth-of-type(4) video{background: url(../images/video03.jpg) no-repeat;background-size: cover;}
.video li:nth-of-type(5) video{background: url(../images/video01.jpg) no-repeat;background-size: cover;}
.video1{width: 200px;height: 100px; top: 143px;left: 0; z-index: 1;}/*创建5个播放框初始位置类，可自行更改*/
.video2{width: 400px;height: 200px; top: 86px;left: 90px; z-index: 2;}
.video3{width: 700px;height: 350px; top: 0px;left: 190px; z-index: 3;}
.video4{width: 400px;height: 200px; top: 86px;left: 590px; z-index: 2;}
.video5{width: 200px;height: 100px; top: 143px;left: 880px; z-index: 1;}
$(function(){
var click=0;
var right=0; //解决第一次右边点击没反应
$('.video>div:first-child').click(function(){ //当点击左边按钮
for(var i=0; i=6)click=1;
right=1;
$('.video li:nth-of-type('+(((click+0) |
【本文地址】
今日新闻 |
推荐新闻 |