-
维姐，不接语音请打字2018-10-29 00:00
- 10
- 44
- 0
问题：使用swiper 制作视频+图片的轮播图，1.自动轮播时，分页器判断是视频还是图片，自动切换样式，2.当用户点击播放视频时，停止轮播，当视频暂停或者播放完毕时，开始自动轮播
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>门店详情</title>
<link rel="stylesheet" type="text/css" href="css/api.css"/>
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/swiper.min.css">
<style media="screen">
.videoCon,.slideCon,.imgSize{width: 100%;height: 100%;}
</style></head>
<body>
<div class="wrap">
<div class="flex outer">
<div class="item overflow">
<div class="flex overflow">
<div class="sport-title">
<h3 style="position: relative;">
<svg class="icon iconBack" aria-hidden="true" onclick="api.closeWin();"><use xlink:href="#icon-fanhui"></use></svg>
门店详情
</h3>
</div>
<div class="item overflow">
<div class="swiper-container swiper-containerAuto">
<div class="swiper-wrapper imgSize" id="siwperCon">
<div class="swiper-slide" v-for="i in images">
<div class="slideCon">
<video class="videoCon" controls="controls" v-if="i.sign== 0" :src="i.img" playsinline="true" webkit-playsinline="true" preload="auto"></video>
<img v-else :src="i.img" />
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
</div></div>
</div>
</body>
</html>
<script type="text/javascript" src="script/rem.js"></script>
<script type="text/javascript" src="script/vue.min.js"></script>
<script type="text/javascript" src="script/swiper.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '.wrap',
data: {
images:[
{sign:'0',img:'res/video.mp4'},//视频
{sign:'1',img:'image/swiper.jpg'},//图片
{sign:'1',img:'image/swiper2.jpg'},,//图片
{sign:'1',img:'image/swiper3.jpg'},,//图片
],},
methods:{
},
});
var mySwiper=new Swiper ('.swiper-containerAuto', {//自动轮播图
loop: true,
centeredSlides:true,
// 如果需要分页器
pagination: {
el: '.swiper-pagination',},
observer:true, //修改swiper自己或子元素时，自动初始化swiper
observeParents:true,//修改swiper的父元素时，自动初始化swiper
autoplay: {
delay: 2500,
// disableOnInteraction: false,},
on: {//我遇到的难题。。。。。
click: function(swiper){//点击当前的swiper-slide时，判断是视频还是图片
var img=vm.images[this.activeIndex];
console.log(img);
if('是视频'){//是视频
//执行代码
}else{//是图片
//执行代码
}
},},
});
</script>
0
打赏
收藏
点击回答
您的回答被采纳后将获得：提问者悬赏的 10 元积分
网站公告
- 扫一扫访问手机版
回答动态
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题函数计算不同地域的是不能用内网吧？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题在ARMS如何申请加入公测呀？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的，这个init方法在哪里进行添加？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器刚到期，是不是就不能再导出存档了呢？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了，怎么办？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了，怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了，是什么情况？预计能赚取 0积分收益
- 回到顶部
- 回到顶部