Bootstrap实战—Dplayer播放器(图片)
- 本章介绍如何利用Dplayer播放器来构建视频播放网页。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>融职教育</title>
<!--移动设备优先-->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--引入Bootstrap CSS-->
<link rel="stylesheet" href="css/bootstrap.css">
<!-- 引入CSS Swiper插件 -->
<link rel="stylesheet" href="css/swiper.min.css">
<!--引入手风琴CSS-->
<link rel="stylesheet" href="css/style.css">
<!--引入 Dplayer css-->
<link rel="stylesheet" href="css/DPlayer.min.css">
<style>
</style>
</head>
<body>
<!--关注我们开始-->
<section class="mt-4">
<div class="container">
<div class="row">
<div class="col">
<div>
<h4 class="d-inline-block">关注我们</h4>
<small class="text-muted pl-2">掌握的是一门就业的技术，为成长积蓄力量</small>
</div>
</div>
</div>
<style>
.film_focus .film_focus_imgs_wrap{width:100%;height:349px;background:url(images/T16WJqXaXeXXXXXXXX-32-32.gif) no-repeat center center;}
.film_focus ul.film_focus_imgs{width:100%;height:9999em;position:absolute;left:0;top:0;}
.film_focus{width:100%;height:349px;overflow:hidden;position:relative;}
.film_focus ul {padding:0px;margin:0px; list-style: none;};
.film_focus ul.film_focus_imgs li{height:349px;overflow:hidden;}
.film_focus .film_focus_desc h3{
height:45px;line-height:45px;overflow:hidden;position:absolute;left:0;top:0;background:rgba(0,0,0,.5);color:#fff;width:100%;padding-left:24px;z-index:99;font-size:16px;
filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#7F000000',endColorstr='#7F000000');
}
.film_focus ul.film_focus_nav{width:15%;height:349px;background:#424242;position:absolute;right:0px;top:0;z-index:100;}
.film_focus ul.film_focus_nav li{height:85px;background:url(images/T1WiB5Xf0EXXXXXXXX-1-75.png) repeat-x;margin:1px 1px 1px 0;padding:5px 0 0 5px;position:relative;}
.film_focus ul.film_focus_nav li.cur{background:url(images/T19yB9Xm0BXXXXXXXX-296-79.png) no-repeat 0 2px;width:130px;left:-19px;z-index:100;}
.film_focus ul.film_focus_nav li img{position:absolute;left:5px;top:5px;}
.film_focus ul.film_focus_nav li.cur img{left:19px;width:110px;height:79px;margin-top:-1px;}
.film_focus ul.film_focus_nav li h4{color:#fff;}
.film_focus ul.film_focus_nav li p{color:#B9B9B9;line-height:1.8em;}
.knowcon_right {width: 100%;height: 349px;border-top: 2px #ff8e3b solid;background: #FDFDFD;box-shadow: 5px 5px 10px rgba(0,0,0,0.5);}
.pulsing:before, .pulsing:after {content: "";position: absolute;}
.main-content {display: grid;width: 100%;}
@media (max-width: 767px) {
.w-85 { width: 100% !important;}
}
@media (min-width: 768px) {
.w-85 {width: 85% !important;}
}
</style>
<div class="row">
<div class="col-12 col-lg-8">
<div class="film_focus">
<div class="film_focus_imgs_wrap main-content">
<ul class="film_focus_imgs w-85">
<li>
<img src="images/player/p1.png" style="width:100%;height:349px" alt=""></img>
</li>
<li>
<img src="images/player/p2.png" style="width:100%;height:349px" alt=""></img>
</li>
<li>
<img src="images/player/p3.png" style="width:100%;height:349px" alt=""></img>
</li>
<li>
<img src="images/player/p4.png" style="width:100%;height:349px" alt=""></img>
</li>
</ul>
</div>
<div class="film_focus_desc d-none d-md-block">
<h3>Web全栈开发就业班10大核心优势</h3>
<ul id="film" class="film_focus_nav">
<li class="cur">
<img width="100" height="79" src="images/player/t1.png" alt="Web全栈开发就业班10大核心优势" />
</li>
<li>
<img width="100" height="79" src="images/player/t2.png" alt="融职IT教育首创“坐班”学习模式" />
</li>
<li>
<img width="100" height="79" src="images/player/t3.png" alt="EduWork只为培养可以交付的程序员" />
</li>
<li>
<img width="100" height="79" src="images/player/t4.png" alt="浸入【智校云】项目组，在工作中学习" />
</li>
</ul>
</div>
</div>
</div>
<div class="col-12 col-lg-4">
</div>
</div>
</div>
</section>
<!--关注我们结束-->
<!--引入jQuery, 再引入poppper.js 最后再引入Bootstrap.js-->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.bundle.js"></script>
<!--引入Dplayer的JS-->
<script type="text/javascript">
(function(A){
A.fn.th_video_focus=function(E){
var G={
actClass:"cur",
navContainerClass:".focus_pic_preview",
focusContainerClass:".focus_pic",
animTime:600,
delayTime:5000
};
if(E){
A.extend(G,E)
}
var C=G.actClass, D=G.navContainerClass, B=G.focusContainerClass, F=G.animTime, H=G.delayTime, I=null;
return this.each(function(){
var O=A(this), M=A(D+" li",O), P=A(B+" li",O), L=M.length, K=O.height();
function N(R){
var V=K*R*-1;
var U=A(B+" li",O), W=null, T=null;
for(var S=0;S<=R;S++){
W=U.eq(S);
T=W.find('script[type="text/templ"]');
if(T.length>0){
W.html(T.html())
}
}
A(B,O).stop().animate({top:V},F,function(){
var Y=O.find("h3"), X=Y.height();
Y.height(0).html(A(".film_focus_nav li").eq(R).find("img").attr("alt")).animate({height:X},600)
});
A(D+" li").eq(R).addClass(C).siblings().removeClass(C)
}
function Q(){
if(I){
clearInterval(I)
}
I=setInterval(function(){
var R=A(D+" li."+C).index();
N((R+1)%L)
},H)
}
O.hover(function(){
if(I){
clearInterval(I)
}
},function(){
/* if(dp1.video.paused && dp2.video.paused && dp3.video.paused && dp4.video.paused ) {
Q()
} */
});
var J=null;
M.hover(function(){
var R=A(this).index();
if(I){
clearInterval(I)
}
J=setTimeout(function(){
N(R)
},300)
},function(){
if(J){
clearTimeout(J)
}
Q()
}).click(function(T){
var R=A(this).index(), S=P.eq(R).find("a");
if(document.uniqueID||window.opera){
S[0].click();
T.stopPropagation();
T.preventDefault()
}
});
Q()
})
}
})(jQuery);
$(function(){
//第二个焦点图
$(".film_focus").th_video_focus({
navContainerClass:".film_focus_nav",
focusContainerClass:".film_focus_imgs",
delayTime:3000
});
});
</script>
</body>
</html>
1844
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
