2014已经悄然到来，在新的一年我们恭贺所有客户事业蒸蒸日上，同事庆祝智软设计工作室成立5周年，在5周年为众多客户提供了保质量的网站设计与网站制作。 我们在新的一年质量与服务将会更加进一步为更多的客户带来高端的网站设计与服务！期待与你合作
智软设计工作室多年为宁波企业网站制作建设服务一直以来我们以最优惠价格，最优质的质量，最突出的设计！得到了客户的一致认可,我们的服务包括：宁波网站设计,宁波网站建设,宁波网站制作,宁波网站优化,宁波英文网站制作我们会以优质的服务,最低的价格来报答客户!
点击连接网站优化推广-对企业的网站优化和网站推广--对企业的重要性-点击进行详细了解
2014开幕，宁波智软设计为宁波企业提供更加优秀的设计和实惠的价格
智软设计工作为宁波客户网站设计案例展示平台-案例均为定期更新，让新老客户更好的看到我们做的案例，点击查看我们做的网站案例吧！
智软(宁波网络公司)帮你轻松解决网络问题，网站一站式解决方案
swiper视频+图片 响应式代码demo 自动判断动画时间
2020-03-21 11:30
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>swiper视频+图片 响应式代码demo 自动判断动画时间</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css">
<style>
/* .banner-container{margin: 0 auto;position: relative;}*/
/*自适应配置*/
.swiper-slide{height:1px} /* 随意指定一个height值即可 */
.swiper-slide-active { height:auto}
.banner-container .swiper-slide *{height: 100%;width: 100%;}
</style>
</head>
<body>
<div class="swiper-container banner-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><a href=""><img src="Uploads/5e5f7ad1966bd607.jpg" alt=""></a></div>
<div class="swiper-slide"><video src="https://zhkj.evergrande.com/static/img/index/3.06M.mp4" preload="auto" style="width: 100%;height:640px; object-fit: fill"></video></div>
<div class="swiper-slide"><a href=""><img src="Uploads/5e5f7abf5d336294.jpg" alt=""></a></div>
<div class="swiper-slide"><video src="https://zhkj.evergrande.com/static/img/index/3.06M.mp4" preload="auto" style="width: 100%;height:640px; object-fit: fill"></video></div>
<div class="swiper-slide"><a href=""><img src="Uploads/5e5f7ac7c43299548.jpg" alt=""></a></div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>
<script>
$(function(){
var Swiper1 = new Swiper('.banner-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
observer:true,
observeParents:true,
autoplay:3500,
loop:true,
speed:800,
onSlideChangeStart: function(Swiper1){
// 暂停所有视频
var videos = document.getElementsByTagName('video');
for (var i = videos.length - 1; i >= 0; i--) {
(function(){
var p = i;
videos[p].addEventListener('play',function(){
pauseAll(p);
})
})()
}
function pauseAll(index){
for (var j = videos.length - 1; j >= 0; j--) {
if (j!=index) videos[j].pause();
}
};
// 判断swiper-slide-active是否有视频
if($(".banner-container .swiper-slide-active video").length>0){
// 停止自动切换
Swiper1.stopAutoplay();
// 动态增加id
$(".banner-container .swiper-slide-active video").attr("id","video_01");
var _video=document.getElementById("video_01");
// 播放视频
_video.play();
// 切换后重新播放视频
_video.currentTime = 0;
// 静音
_video.volume = 0;
// 监听视频播放结束
_video.addEventListener('ended', function () {
Swiper1.slideNext();
//重新开始轮播banner
Swiper1.startAutoplay();
});
}
},
onSlideChangeEnd: function(Swiper1){
//动态移除id
$(".banner-container .swiper-slide-active video").attr("id","");
}
});
})
</script>
</body>
</html>
【责任编辑：小戴工程师】
上一篇：dede模板直接读取上传附件图片代码 按照id获取 下一篇：iis8 导入证书方法 和 .crt .key文件怎么转换为.pfx教程最新文章
2020-03-21 11:30
相关文章
2020-03-21 11:30
客户案例
QQ在线咨询
18668277799
