<template> <div class="selfLotteryBox"> <div class="row"> <div class="col col-xs-4"> <div class="swiper_out_box"> <swiper ref="swiper1" :options="swiperOption1"> <swiper-slide class="swiper-no-swiping"> <div class="swiper_slide_innerBox">1</div> </swiper-slide> <swiper-slide class="swiper-no-swiping"> <div class="swiper_slide_innerBox">2</div> </swiper-slide> <swiper-slide class="swiper-no-swiping"> <div class="swiper_slide_innerBox">3</div> </swiper-slide> </swiper> </div> </div> <div class="col col-xs-4"> <div class="swiper_out_box"> <swiper ref="swiper2" :options="swiperOption2"> <swiper-slide class="swiper-no-swiping"> <div class="swiper_slide_innerBox">1</div> </swiper-slide> <swiper-slide class="swiper-no-swiping"> <div class="swiper_slide_innerBox">2</div> </swiper-slide> <swiper-slide class="swiper-no-swiping"> <div class="swiper_slide_innerBox">3</div> </swiper-slide> </swiper> </div> </div> <div class="col col-xs-4"> <div class="swiper_out_box"> <swiper ref="swiper3" :options="swiperOption3"> <swiper-slide class="swiper-no-swiping"> <div class="swiper_slide_innerBox">1</div> </swiper-slide> <swiper-slide class="swiper-no-swiping"> <div class="swiper_slide_innerBox">2</div> </swiper-slide> <swiper-slide class="swiper-no-swiping"> <div class="swiper_slide_innerBox">3</div> </swiper-slide> </swiper> </div> </div> </div> <div> <button class="btn btn-primary" @click="startPlay()">开始切换</button> </div> </div> </template> <script> import { swiper,swiperSlide } from 'vue-awesome-swiper'; import vm from '../main.js'; import Vue from "vue"; export default { data(){ return{ curSwiper1Index:'', swiperOption1:{ init: true,//swiper是否立即初始化 slidesPerView:1, spaceBetween:10, setWrapperSize: true,//Swiper使用flexbox布局(display: flex)，开启这个设定会在Wrapper上添加等于slides相加的宽或高，在对flexbox布局的支持不是很好的浏览器中可能需要用到。 autoHeight: true, mousewheel: false, mousewheelControl: false, height:200,//设置slide的高度 resistanceRatio: 0,//抵抗率。 observer:true,//修改swiper自己或子元素时自动初始化swiper observeParents: true,//修改Swiper的父元素时，自动初始化swiper。 // threshold :201,//触摸距离小于这个值 不会被拖动 observer:true, observeParents: false,//将observe应用于Swiper的父元素。 keyboard: { enabled: true, }, speed:2000, autoplay: { delay: 0, disableOnInteraction: false, reverseDirection: true,//逆向播放 }, loop: true, direction: 'vertical', on:{ init:function(){//初始化时触发 这里的this是swiper实例 console.log("swiper1初始化了"); // console.log(this) }, slideChange: function(){ // slide翻页后触发 // console.log(this.activeIndex) }, autoplayStart:function(){ console.log("swiper1自动切换开启") }, autoplayStop:function(){ console.log("swiper1自动切换关闭") } } }, swiperOption2:{ init: true,//swiper是否立即初始化 slidesPerView:1, spaceBetween:10, setWrapperSize: true,//Swiper使用flexbox布局(display: flex)，开启这个设定会在Wrapper上添加等于slides相加的宽或高，在对flexbox布局的支持不是很好的浏览器中可能需要用到。 autoHeight: true, mousewheel: false, mousewheelControl: false, height:200,//设置slide的高度 resistanceRatio: 0,//抵抗率。 observer:true,//修改swiper自己或子元素时自动初始化swiper observeParents: true,//修改Swiper的父元素时，自动初始化swiper。 // threshold :201,//触摸距离小于这个值 不会被拖动 observer:true, observeParents: false,//将observe应用于Swiper的父元素。 keyboard: { enabled: true, }, speed:2000, autoplay: { delay: 0, disableOnInteraction: false, reverseDirection: true,//逆向播放 }, loop: true, direction: 'vertical', on:{ init:function(){//初始化时触发 这里的this是swiper实例 console.log("swiper1初始化了"); // console.log(this) }, slideChange: function(){ // slide翻页后触发 // console.log(this.activeIndex) }, autoplayStart:function(){ console.log("swiper1自动切换开启") }, autoplayStop:function(){ console.log("swiper1自动切换关闭") } } }, swiperOption3:{ init: true,//swiper是否立即初始化 slidesPerView:1, spaceBetween:10, setWrapperSize: true,//Swiper使用flexbox布局(display: flex)，开启这个设定会在Wrapper上添加等于slides相加的宽或高，在对flexbox布局的支持不是很好的浏览器中可能需要用到。 autoHeight: true, mousewheel: false, mousewheelControl: false, height:200,//设置slide的高度 resistanceRatio: 0,//抵抗率。 observer:true,//修改swiper自己或子元素时自动初始化swiper observeParents: true,//修改Swiper的父元素时，自动初始化swiper。 // threshold :201,//触摸距离小于这个值 不会被拖动 observer:true, observeParents: false,//将observe应用于Swiper的父元素。 keyboard: { enabled: true, }, speed:2000, autoplay: { delay: 0, disableOnInteraction: false, reverseDirection: true,//逆向播放 }, loop: true, direction: 'vertical', on:{ init:function(){//初始化时触发 这里的this是swiper实例 console.log("swiper1初始化了"); // console.log(this) }, slideChange: function(){ // slide翻页后触发 // console.log(this.activeIndex) }, autoplayStart:function(){ console.log("swiper1自动切换开启") }, autoplayStop:function(){ console.log("swiper1自动切换关闭") } } } } }, created(){ }, mounted(){ var self=this; self.stopAllAutoplay();//初始化时停止所有swiper切换 }, methods:{ startPlay(){//开始切换 var self=this; self.$refs.swiper1.swiper.autoplay.start(); setTimeout(()=>{//1s后 self.$refs.swiper1.swiper.params.speed=600; },1000) setTimeout(()=>{//0.5s后 self.$refs.swiper2.swiper.autoplay.start(); setTimeout(()=>{ self.$refs.swiper2.swiper.params.speed=600; },1000) },500); setTimeout(()=>{//1s后 self.$refs.swiper3.swiper.autoplay.start(); setTimeout(()=>{ self.$refs.swiper3.swiper.params.speed=600; },1000) },1000); setTimeout(()=>{//3s后 self.$refs.swiper1.swiper.params.speed=200; self.$refs.swiper2.swiper.params.speed=200; self.$refs.swiper3.swiper.params.speed=200; },3000); setTimeout(()=>{//7s后 self.$refs.swiper1.swiper.params.speed=100; self.$refs.swiper2.swiper.params.speed=100; self.$refs.swiper3.swiper.params.speed=100; },7000); setTimeout(()=>{//11s后 self.$refs.swiper1.swiper.params.speed=500; self.$refs.swiper2.swiper.params.speed=400; self.$refs.swiper3.swiper.params.speed=400; },11000); setTimeout(()=>{//14s后 self.$refs.swiper1.swiper.params.speed=700; self.$refs.swiper2.swiper.params.speed=600; self.$refs.swiper3.swiper.params.speed=500; },14000); setTimeout(()=>{//16s后 self.$refs.swiper1.swiper.params.speed=1000; self.$refs.swiper2.swiper.params.speed=1000; self.$refs.swiper3.swiper.params.speed=1000; },16000); setTimeout(()=>{//17s后 self.stopBy([1,2,0]); },17000); }, stopPlay(){//停止切换 var self=this; self.$refs.swiper1.swiper.autoplay.stop(); }, quickly(){//加快 var self=this; self.$refs.swiper1.swiper.params.speed=100; }, slowLy(){//减缓 var self=this; self.$refs.swiper1.swiper.params.speed=2000; }, stopBy(curIndexArr){//到第几个停止 var self=this; console.log(self.$refs.swiper1.swiper.activeIndex); self.$refs.swiper1.swiper.on('slideChange', function () { console.log(self.$refs.swiper1.swiper.activeIndex); if(self.$refs.swiper1.swiper.activeIndex==curIndexArr[0]){ self.$refs.swiper1.swiper.autoplay.stop(); self.$refs.swiper1.swiper.off('slideChange'); } }); self.$refs.swiper2.swiper.on('slideChange', function () { console.log(self.$refs.swiper1.swiper.activeIndex); if(self.$refs.swiper2.swiper.activeIndex==curIndexArr[1]){ self.$refs.swiper2.swiper.autoplay.stop(); self.$refs.swiper2.swiper.off('slideChange'); } }); self.$refs.swiper3.swiper.on('slideChange', function () { console.log(self.$refs.swiper3.swiper.activeIndex); if(self.$refs.swiper3.swiper.activeIndex==curIndexArr[2]){ self.$refs.swiper3.swiper.autoplay.stop(); self.$refs.swiper3.swiper.off('slideChange'); } }); }, stopAllAutoplay(){ var self=this; self.$refs.swiper1.swiper.autoplay.stop();//停止swiper自动切换 self.$refs.swiper2.swiper.autoplay.stop();//停止swiper自动切换 self.$refs.swiper3.swiper.autoplay.stop();//停止swiper自动切换 } } } </script> <style scoped> @import url("../style/outSwiperStyle.css"); .selfLotteryBox{ } .swiper_out_box{ height:200px; width:100%; position: relative; overflow: hidden; } .swiper_slide_innerBox{ text-align: center; font-size:50px; font-weight: bold; height:200px; line-height:200px; background:green; } </style>
。。。
效果图：
简单的例子，样式待调整
下一版：
<template> <div class="selfLotteryBox"> <div class="container"> <div class="bannerBox"> <img src="http://kexiepingtaieposter.hoohui.cn//registFile/fa5df7c9-445d-4b58-97c4-ad8b86a92241/Z0134_20191118152535.jpeg" alt=""> </div> <div class="row"> <div class="col col-xs-4"> <div class="swiper_out_box"> <swiper ref="swiper1" :options="swiperOption1"> <swiper-slide class="swiper-no-swiping"> <div class="swiper_slide_innerBox"> <img src="http://kexiepingtaieposter.hoohui.cn//registFile/fa5df7c9-445d-4b58-97c4-ad8b86a92241/Z0134_20191118161817.jpeg" alt=""> </div> </swiper-slide> <swiper-slide class="swiper-no-swiping"> <div class="swiper_slide_innerBox"> <img src="http://kexiepingtaieposter.hoohui.cn//registFile/fa5df7c9-445d-4b58-97c4-ad8b86a92241/Z0134_20191118162717.jpeg" alt=""> </div> </swiper-slide> <swiper-slide class="swiper-no-swiping"> <div class="swiper_slide_innerBox"> <img src="http://kexiepingtaieposter.hoohui.cn//registFile/fa5df7c9-445d-4b58-97c4-ad8b86a92241/Z0134_20191118162622.jpeg" alt=""> </div> </swiper-slide> <swiper-slide class="swiper-no-swiping"> <div class="swiper_slide_innerBox"> <img src="http://kexiepingtaieposter.hoohui.cn//registFile/fa5df7c9-445d-4b58-97c4-ad8b86a92241/Z0134_20191118162740.jpeg" alt=""> </div> </swiper-slide> <swiper-slide class="swiper-no-swiping"> <div class="swiper_slide_innerBox"> <img src="http://kexiepingtaieposter.hoohui.cn//registFile/fa5df7c9-445d-4b58-97c4-ad8b86a92241/Z0134_2019111816286.jpeg" alt=""> </div> </swiper-slide> </swiper> </div> </div> <div class="col col-xs-4"> <div class="swiper_out_box"> <swiper ref="swiper2" :options="swiperOption2"> <swiper-slide class="swiper-no-swiping"> <div class="swiper_slide_innerBox"> <img src="http://kexiepingtaieposter.hoohui.cn//registFile/fa5df7c9-445d-4b58-97c4-ad8b86a92241/Z0134_20191118161817.jpeg" alt=""> </div> </swiper-slide> <swiper-slide class="swiper-no-swiping"> <div class="swiper_slide_innerBox"> <img src="http://kexiepingtaieposter.hoohui.cn//registFile/fa5df7c9-445d-4b58-97c4-ad8b86a92241/Z0134_20191118162717.jpeg" alt=""> </div> </swiper-slide> <swiper-slide class="swiper-no-swiping"> <div class="swiper_slide_innerBox"> <img src="http://kexiepingtaieposter.hoohui.cn//registFile/fa5df7c9-445d-4b58-97c4-ad8b86a92241/Z0134_20191118162622.jpeg" alt=""> </div> </swiper-slide> <swiper-slide class="swiper-no-swiping"> <div class="swiper_slide_innerBox"> <img src="http://kexiepingtaieposter.hoohui.cn//registFile/fa5df7c9-445d-4b58-97c4-ad8b86a92241/Z0134_20191118162740.jpeg" alt=""> </div> </swiper-slide> <swiper-slide class="swiper-no-swiping"> <div class="swiper_slide_innerBox"> <img src="http://kexiepingtaieposter.hoohui.cn//registFile/fa5df7c9-445d-4b58-97c4-ad8b86a92241/Z0134_2019111816286.jpeg" alt=""> </div> </swiper-slide> </swiper> </div> </div> <div class="col col-xs-4"> <div class="swiper_out_box"> <swiper ref="swiper3" :options="swiperOption3"> <swiper-slide class="swiper-no-swiping"> <div class="swiper_slide_innerBox"> <img src="http://kexiepingtaieposter.hoohui.cn//registFile/fa5df7c9-445d-4b58-97c4-ad8b86a92241/Z0134_20191118161817.jpeg" alt=""> </div> </swiper-slide> <swiper-slide class="swiper-no-swiping"> <div class="swiper_slide_innerBox"> <img src="http://kexiepingtaieposter.hoohui.cn//registFile/fa5df7c9-445d-4b58-97c4-ad8b86a92241/Z0134_20191118162717.jpeg" alt=""> </div> </swiper-slide> <swiper-slide class="swiper-no-swiping"> <div class="swiper_slide_innerBox"> <img src="http://kexiepingtaieposter.hoohui.cn//registFile/fa5df7c9-445d-4b58-97c4-ad8b86a92241/Z0134_20191118162622.jpeg" alt=""> </div> </swiper-slide> <swiper-slide class="swiper-no-swiping"> <div class="swiper_slide_innerBox"> <img src="http://kexiepingtaieposter.hoohui.cn//registFile/fa5df7c9-445d-4b58-97c4-ad8b86a92241/Z0134_20191118162740.jpeg" alt=""> </div> </swiper-slide> <swiper-slide class="swiper-no-swiping"> <div class="swiper_slide_innerBox"> <img src="http://kexiepingtaieposter.hoohui.cn//registFile/fa5df7c9-445d-4b58-97c4-ad8b86a92241/Z0134_2019111816286.jpeg" alt=""> </div> </swiper-slide> </swiper> </div> </div> </div> <!-- <div class="resultBox"> 抽奖结果:{{resultText}} </div> --> <div class="row" style="margin-top:30px;"> <div class="col col-xs-4 col-xs-offset-4"> <button class="btn btn-primary btn-block" @click="startPlay()">{{runing?"抽奖中":"开始抽奖"}}</button> </div> </div> </div> </div> </template> <script> import { swiper,swiperSlide } from 'vue-awesome-swiper'; import vm from '../main.js'; import Vue from "vue"; export default { data(){ return{ curSwiper1Index:'', runing:false,//是否正在运行 result:{},//抽奖结果 curIndexArr:[1,2,0],//抽奖结果(抽奖后 显示的结果) resultText:"",//中奖结果 gailv:[ {gailv:160,jiangpin:"人生大赢家",index:1}, {gailv:160,jiangpin:"睡到自然醒",index:2}, {gailv:160,jiangpin:"水逆全退散",index:3}, {gailv:160,jiangpin:"面试约不断",index:4}, {gailv:160,jiangpin:"T恤",index:0}, {gailv:200,jiangpin:"谢谢参与",index:""} ], swiperOption1:{ init: true,//swiper是否立即初始化 slidesPerView:1, spaceBetween:0, setWrapperSize: true,//Swiper使用flexbox布局(display: flex)，开启这个设定会在Wrapper上添加等于slides相加的宽或高，在对flexbox布局的支持不是很好的浏览器中可能需要用到。 autoHeight: true, mousewheel: false, mousewheelControl: false, height:200,//设置slide的高度 resistanceRatio: 0,//抵抗率。 observer:true,//修改swiper自己或子元素时自动初始化swiper observeParents: true,//修改Swiper的父元素时，自动初始化swiper。 // threshold :201,//触摸距离小于这个值 不会被拖动 observer:true, observeParents: false,//将observe应用于Swiper的父元素。 keyboard: { enabled: true, }, speed:2000, autoplay: { delay: 0, disableOnInteraction: false, reverseDirection: true,//逆向播放 }, loop: true, direction: 'vertical', on:{ init:function(){//初始化时触发 这里的this是swiper实例 // console.log("swiper1初始化了"); }, slideChange: function(){ // slide翻页后触发 // console.log(this.activeIndex) }, autoplayStart:function(){ // console.log("swiper1自动切换开启") }, autoplayStop:function(){ // console.log("swiper1自动切换关闭") } } }, swiperOption2:{ init: true,//swiper是否立即初始化 slidesPerView:1, spaceBetween:0, setWrapperSize: true,//Swiper使用flexbox布局(display: flex)，开启这个设定会在Wrapper上添加等于slides相加的宽或高，在对flexbox布局的支持不是很好的浏览器中可能需要用到。 autoHeight: true, mousewheel: false, mousewheelControl: false, height:200,//设置slide的高度 resistanceRatio: 0,//抵抗率。 observer:true,//修改swiper自己或子元素时自动初始化swiper observeParents: true,//修改Swiper的父元素时，自动初始化swiper。 // threshold :201,//触摸距离小于这个值 不会被拖动 observer:true, observeParents: false,//将observe应用于Swiper的父元素。 keyboard: { enabled: true, }, speed:2000, autoplay: { delay: 0, disableOnInteraction: false, reverseDirection: true,//逆向播放 }, loop: true, direction: 'vertical', on:{ init:function(){//初始化时触发 这里的this是swiper实例 // console.log("swiper1初始化了"); }, slideChange: function(){ // slide翻页后触发 // console.log(this.activeIndex) }, autoplayStart:function(){ // console.log("swiper1自动切换开启") }, autoplayStop:function(){ // console.log("swiper1自动切换关闭") } } }, swiperOption3:{ init: true,//swiper是否立即初始化 slidesPerView:1, spaceBetween:0, setWrapperSize: true,//Swiper使用flexbox布局(display: flex)，开启这个设定会在Wrapper上添加等于slides相加的宽或高，在对flexbox布局的支持不是很好的浏览器中可能需要用到。 autoHeight: true, mousewheel: false, mousewheelControl: false, height:200,//设置slide的高度 resistanceRatio: 0,//抵抗率。 observer:true,//修改swiper自己或子元素时自动初始化swiper observeParents: true,//修改Swiper的父元素时，自动初始化swiper。 // threshold :201,//触摸距离小于这个值 不会被拖动 observer:true, observeParents: false,//将observe应用于Swiper的父元素。 keyboard: { enabled: true, }, speed:2000, autoplay: { delay: 0, disableOnInteraction: false, reverseDirection: true,//逆向播放 }, loop: true, direction: 'vertical', on:{ init:function(){//初始化时触发 这里的this是swiper实例 // console.log("swiper1初始化了"); }, slideChange: function(){ // slide翻页后触发 // console.log(this.activeIndex) }, autoplayStart:function(){ // console.log("swiper1自动切换开启") }, autoplayStop:function(){ // console.log("swiper1自动切换关闭") } } } } }, created(){ }, mounted(){ var self=this; self.stopAllAutoplay();//初始化时停止所有swiper切换 document.onkeydown = function(e){//回车键触发确定按钮事件 var ev =window.event|| e; if(ev.keyCode==13) { self.startPlay(); } } }, methods:{ startPlay(){//开始切换 var self=this; if(self.runing){ return; } self.runing=true;//已运行 self.resultText="";//中奖好结果文字 self.counterResult();//产生抽奖结果 self.$refs.swiper1.swiper.autoplay.start(); setTimeout(()=>{//1s后 self.$refs.swiper1.swiper.params.speed=600; },1000) setTimeout(()=>{//0.5s后 self.$refs.swiper2.swiper.autoplay.start(); setTimeout(()=>{ self.$refs.swiper2.swiper.params.speed=600; },1000) },500); setTimeout(()=>{//1s后 self.$refs.swiper3.swiper.autoplay.start(); setTimeout(()=>{ self.$refs.swiper3.swiper.params.speed=600; },1000) },1000); setTimeout(()=>{//3s后 self.$refs.swiper1.swiper.params.speed=200; self.$refs.swiper2.swiper.params.speed=200; self.$refs.swiper3.swiper.params.speed=200; },3000); // setTimeout(()=>{//7s后 // self.$refs.swiper1.swiper.params.speed=100; // self.$refs.swiper2.swiper.params.speed=100; // self.$refs.swiper3.swiper.params.speed=100; // },6000); // setTimeout(()=>{//11s后 // self.$refs.swiper1.swiper.params.speed=500; // self.$refs.swiper2.swiper.params.speed=400; // self.$refs.swiper3.swiper.params.speed=400; // },5000); // setTimeout(()=>{//14s后 // self.$refs.swiper1.swiper.params.speed=700; // self.$refs.swiper2.swiper.params.speed=600; // self.$refs.swiper3.swiper.params.speed=500; // },8000); setTimeout(()=>{//16s后 self.$refs.swiper1.swiper.params.speed=1000; self.$refs.swiper2.swiper.params.speed=1000; self.$refs.swiper3.swiper.params.speed=1000; },7000); setTimeout(()=>{//17s后 new Promise((resolve)=>{ self.stopBy(self.curIndexArr); resolve(); }).then(()=>{ self.resultText=self.result.jiangpin; }); },7000); }, stopPlay(){//停止切换 var self=this; self.$refs.swiper1.swiper.autoplay.stop(); }, quickly(){//加快 var self=this; self.$refs.swiper1.swiper.params.speed=100; }, slowLy(){//减缓 var self=this; self.$refs.swiper1.swiper.params.speed=2000; }, stopBy(curIndexArr){//到第几个停止 var self=this; self.$refs.swiper1.swiper.on('slideChange', function () { if(self.$refs.swiper1.swiper.activeIndex==curIndexArr[0]){ self.$refs.swiper1.swiper.autoplay.stop(); self.$refs.swiper1.swiper.off('slideChange'); } }); self.$refs.swiper2.swiper.on('slideChange', function () { if(self.$refs.swiper2.swiper.activeIndex==curIndexArr[1]){ self.$refs.swiper2.swiper.autoplay.stop(); self.$refs.swiper2.swiper.off('slideChange'); } }); self.$refs.swiper3.swiper.on('slideChange', function () { if(self.$refs.swiper3.swiper.activeIndex==curIndexArr[2]){ self.$refs.swiper3.swiper.autoplay.stop(); self.$refs.swiper3.swiper.off('slideChange'); } }); self.runing=false;//已停止 }, stopAllAutoplay(){ var self=this; self.$refs.swiper1.swiper.autoplay.stop();//停止swiper自动切换 self.$refs.swiper2.swiper.autoplay.stop();//停止swiper自动切换 self.$refs.swiper3.swiper.autoplay.stop();//停止swiper自动切换 }, counterResult(){//根据概率 产生中奖结果 var self=this; var allArr=[]; self.result=[]; for(let i=0,len=self.gailv.length;i<len;i++){ for(let j=0,jLen=self.gailv[i].gailv;j<jLen;j++){ allArr.push(self.gailv[i]); } } self.result=allArr[Math.floor(Math.random() * 1000)];//生成中奖结果 self.curIndexArr=[]; var a,b,c; if(self.result.jiangpin=="谢谢参与"){ a=Math.floor(Math.random()*6);//生成[0,6)的随机整数 c=Math.floor(Math.random()*6); function productB(){//产生b b=Math.floor(Math.random()*6); if(b==a){ productB();//如果b和a相等，则再次生成b } } productB(); }else{ a=b=c=self.result.index; } self.curIndexArr.push(a,b,c); } } } </script> <style scoped> @import url("../style/outSwiperStyle.css"); .selfLotteryBox{ /* position: absolute; top:0; left:0; right:0; bottom:0; overflow-y: auto; background:url("http://kexiepingtaieposter.hoohui.cn//registFile/fa5df7c9-445d-4b58-97c4-ad8b86a92241/Z0134_20191118152535.jpeg") no-repeat center center; background-size:cover; */ } .swiper_out_box{ height:200px; width:100%; position: relative; overflow: hidden; } .swiper_slide_innerBox{ text-align: center; font-size:14px; font-weight: bold; height:200px; line-height:200px; padding:20px; box-sizing: border-box; position: relative; } .swiper_slide_innerBox img{ position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); width:auto; height:90%; } .bannerBox{ } .bannerBox img{ width:100%; height:auto; } .resultBox{ text-align: center; font-size: 30px; font-weight: bold; color:red; } </style>
。。。
继续完善：
<template> <div class="selfLotteryBox"> <div class="container"> <!-- <div class="bannerBox"> <img src="http://kexiepingtaieposter.hoohui.cn//registFile/fa5df7c9-445d-4b58-97c4-ad8b86a92241/Z0134_20191118152535.jpeg" alt=""> </div> --> <div class="centerContent"> <div class="row"> <div class="col col-xs-4"> <div class="swiper_out_box"> <swiper ref="swiper1" :options="swiperOption1"> <swiper-slide class="swiper-no-swiping"> <div class="swiper_slide_innerBox"> <img src="http://kexiepingtaieposter.hoohui.cn//registFile/fa5df7c9-445d-4b58-97c4-ad8b86a92241/Z0134_20191118161817.jpeg" alt=""> </div> </swiper-slide> <swiper-slide class="swiper-no-swiping"> <div class="swiper_slide_innerBox"> <img src="http://kexiepingtaieposter.hoohui.cn//registFile/fa5df7c9-445d-4b58-97c4-ad8b86a92241/Z0134_20191118162717.jpeg" alt=""> </div> </swiper-slide> <swiper-slide class="swiper-no-swiping"> <div class="swiper_slide_innerBox"> <img src="http://kexiepingtaieposter.hoohui.cn//registFile/fa5df7c9-445d-4b58-97c4-ad8b86a92241/Z0134_20191118162622.jpeg" alt=""> </div> </swiper-slide> <swiper-slide class="swiper-no-swiping"> <div class="swiper_slide_innerBox"> <img src="http://kexiepingtaieposter.hoohui.cn//registFile/fa5df7c9-445d-4b58-97c4-ad8b86a92241/Z0134_20191118162740.jpeg" alt=""> </div> </swiper-slide> </swiper> </div> </div> <div class="col col-xs-4"> <div class="swiper_out_box"> <swiper ref="swiper2" :options="swiperOption2"> <swiper-slide class="swiper-no-swiping"> <div class="swiper_slide_innerBox"> <img src="http://kexiepingtaieposter.hoohui.cn//registFile/fa5df7c9-445d-4b58-97c4-ad8b86a92241/Z0134_20191118161817.jpeg" alt=""> </div> </swiper-slide> <swiper-slide class="swiper-no-swiping"> <div class="swiper_slide_innerBox"> <img src="http://kexiepingtaieposter.hoohui.cn//registFile/fa5df7c9-445d-4b58-97c4-ad8b86a92241/Z0134_20191118162717.jpeg" alt=""> </div> </swiper-slide> <swiper-slide class="swiper-no-swiping"> <div class="swiper_slide_innerBox"> <img src="http://kexiepingtaieposter.hoohui.cn//registFile/fa5df7c9-445d-4b58-97c4-ad8b86a92241/Z0134_20191118162622.jpeg" alt=""> </div> </swiper-slide> <swiper-slide class="swiper-no-swiping"> <div class="swiper_slide_innerBox"> <img src="http://kexiepingtaieposter.hoohui.cn//registFile/fa5df7c9-445d-4b58-97c4-ad8b86a92241/Z0134_20191118162740.jpeg" alt=""> </div> </swiper-slide> </swiper> </div> </div> <div class="col col-xs-4"> <div class="swiper_out_box"> <swiper ref="swiper3" :options="swiperOption3"> <swiper-slide class="swiper-no-swiping"> <div class="swiper_slide_innerBox"> <img src="http://kexiepingtaieposter.hoohui.cn//registFile/fa5df7c9-445d-4b58-97c4-ad8b86a92241/Z0134_20191118161817.jpeg" alt=""> </div> </swiper-slide> <swiper-slide class="swiper-no-swiping"> <div class="swiper_slide_innerBox"> <img src="http://kexiepingtaieposter.hoohui.cn//registFile/fa5df7c9-445d-4b58-97c4-ad8b86a92241/Z0134_20191118162717.jpeg" alt=""> </div> </swiper-slide> <swiper-slide class="swiper-no-swiping"> <div class="swiper_slide_innerBox"> <img src="http://kexiepingtaieposter.hoohui.cn//registFile/fa5df7c9-445d-4b58-97c4-ad8b86a92241/Z0134_20191118162622.jpeg" alt=""> </div> </swiper-slide> <swiper-slide class="swiper-no-swiping"> <div class="swiper_slide_innerBox"> <img src="http://kexiepingtaieposter.hoohui.cn//registFile/fa5df7c9-445d-4b58-97c4-ad8b86a92241/Z0134_20191118162740.jpeg" alt=""> </div> </swiper-slide> </swiper> </div> </div> </div> <!-- <div class="resultBox"> 抽奖结果:{{resultText}} </div> --> <!-- <div class="row" style="margin-top:30px;"> <div class="col col-xs-4 col-xs-offset-4 text-center"> <button class="btn btn-primary selfBtn" @click="startPlay()">{{runing?"抽奖中":"抽奖"}}</button> </div> </div> --> </div> </div> </div> </template> <script> import { swiper,swiperSlide } from 'vue-awesome-swiper'; import vm from '../main.js'; import Vue from "vue"; export default { data(){ return{ curSwiper1Index:'', runing:false,//是否正在运行 result:{},//抽奖结果 curIndexArr:[1,2,0],//抽奖结果(抽奖后 显示的结果) allSwiperTransitionEnd:[true,true,true],//3个swiper的过渡状态是否结束 resultText:"",//中奖结果 gailv:[ {gailv:175,jiangpin:"人生大赢家",index:1}, {gailv:175,jiangpin:"睡到自然醒",index:2}, {gailv:175,jiangpin:"水逆全退散",index:3}, {gailv:175,jiangpin:"面试约不断",index:0}, {gailv:300,jiangpin:"谢谢参与",index:""} ], swiperOption1:{ init: true,//swiper是否立即初始化 slidesPerView:1, spaceBetween:0, setWrapperSize: true,//Swiper使用flexbox布局(display: flex)，开启这个设定会在Wrapper上添加等于slides相加的宽或高，在对flexbox布局的支持不是很好的浏览器中可能需要用到。 autoHeight: true, mousewheel: false, mousewheelControl: false, height:420,//设置slide的高度 resistanceRatio: 0,//抵抗率。 observer:true,//修改swiper自己或子元素时自动初始化swiper observeParents: true,//修改Swiper的父元素时，自动初始化swiper。 // threshold :201,//触摸距离小于这个值 不会被拖动 observer:true, observeParents: false,//将observe应用于Swiper的父元素。 keyboard: { enabled: false, }, speed:2000, autoplay: { delay: 0, disableOnInteraction: false, reverseDirection: true,//逆向播放 }, loop: true, direction: 'vertical', on:{ init:function(){//初始化时触发 这里的this是swiper实例 // console.log("swiper1初始化了"); }, slideChange: function(){ // slide翻页后触发 // console.log(this.activeIndex) }, autoplayStart:function(){ // console.log("swiper1自动切换开启") }, autoplayStop:function(){ // console.log("swiper1自动切换关闭") } } }, swiperOption2:{ init: true,//swiper是否立即初始化 slidesPerView:1, spaceBetween:0, setWrapperSize: true,//Swiper使用flexbox布局(display: flex)，开启这个设定会在Wrapper上添加等于slides相加的宽或高，在对flexbox布局的支持不是很好的浏览器中可能需要用到。 autoHeight: true, mousewheel: false, mousewheelControl: false, height:420,//设置slide的高度 resistanceRatio: 0,//抵抗率。 observer:true,//修改swiper自己或子元素时自动初始化swiper observeParents: true,//修改Swiper的父元素时，自动初始化swiper。 // threshold :201,//触摸距离小于这个值 不会被拖动 observer:true, observeParents: false,//将observe应用于Swiper的父元素。 keyboard: { enabled: false, }, speed:2000, autoplay: { delay: 0, disableOnInteraction: false, reverseDirection: true,//逆向播放 }, loop: true, direction: 'vertical', on:{ init:function(){//初始化时触发 这里的this是swiper实例 // console.log("swiper2初始化了"); }, slideChange: function(){ // slide翻页后触发 // console.log(this.activeIndex) }, autoplayStart:function(){ // console.log("swiper2自动切换开启") }, autoplayStop:function(){ // console.log("swiper2自动切换关闭") } } }, swiperOption3:{ init: true,//swiper是否立即初始化 slidesPerView:1, spaceBetween:0, setWrapperSize: true,//Swiper使用flexbox布局(display: flex)，开启这个设定会在Wrapper上添加等于slides相加的宽或高，在对flexbox布局的支持不是很好的浏览器中可能需要用到。 autoHeight: true, mousewheel: false, mousewheelControl: false, height:420,//设置slide的高度 resistanceRatio: 0,//抵抗率。 observer:true,//修改swiper自己或子元素时自动初始化swiper observeParents: true,//修改Swiper的父元素时，自动初始化swiper。 // threshold :201,//触摸距离小于这个值 不会被拖动 observer:true, observeParents: false,//将observe应用于Swiper的父元素。 keyboard: { enabled: false, }, speed:2000, autoplay: { delay: 0, disableOnInteraction: false, reverseDirection: true,//逆向播放 }, loop: true, direction: 'vertical', on:{ init:function(){//初始化时触发 这里的this是swiper实例 // console.log("swiper3初始化了"); }, slideChange: function(){ // slide翻页后触发 // console.log(this.activeIndex) }, autoplayStart:function(){ // console.log("swiper3自动切换开启") }, autoplayStop:function(){ // console.log("swiper3自动切换关闭") } } } } }, created(){ }, mounted(){ var self=this; self.stopAllAutoplay();//初始化时停止所有swiper切换 document.onkeydown = function(e){//回车键触发确定按钮事件 var ev =window.event|| e; if(ev.keyCode==13) { self.startPlay(); } } }, methods:{ startPlay(){//开始切换 var self=this; if(self.runing){ return; } self.runing=true;//已运行 self.allSwiperTransitionEnd=[false,false,false];//3个swiper是否是静止状态 self.resultText="";//中奖好结果文字 self.counterResult();//产生抽奖结果 self.$refs.swiper1.swiper.autoplay.start(); setTimeout(()=>{//1s后 self.$refs.swiper1.swiper.params.speed=400; },1000) setTimeout(()=>{//0.5s后 self.$refs.swiper2.swiper.autoplay.start(); setTimeout(()=>{ self.$refs.swiper2.swiper.params.speed=400; },1000) },500); setTimeout(()=>{//1s后 self.$refs.swiper3.swiper.autoplay.start(); setTimeout(()=>{ self.$refs.swiper3.swiper.params.speed=400; },1000) },1000); setTimeout(()=>{//3s后 self.$refs.swiper1.swiper.params.speed=100; self.$refs.swiper2.swiper.params.speed=100; self.$refs.swiper3.swiper.params.speed=100; },3000); // setTimeout(()=>{//7s后 // self.$refs.swiper1.swiper.params.speed=100; // self.$refs.swiper2.swiper.params.speed=100; // self.$refs.swiper3.swiper.params.speed=100; // },6000); // setTimeout(()=>{//11s后 // self.$refs.swiper1.swiper.params.speed=500; // self.$refs.swiper2.swiper.params.speed=400; // self.$refs.swiper3.swiper.params.speed=400; // },5000); // setTimeout(()=>{//14s后 // self.$refs.swiper1.swiper.params.speed=700; // self.$refs.swiper2.swiper.params.speed=600; // self.$refs.swiper3.swiper.params.speed=500; // },8000); setTimeout(()=>{//16s后 self.$refs.swiper1.swiper.params.speed=1000; self.$refs.swiper2.swiper.params.speed=1000; self.$refs.swiper3.swiper.params.speed=1000; new Promise((resolve)=>{ self.stopBy(self.curIndexArr);//指定每个swiper停止的位置 resolve(); }).then(()=>{ self.resultText=self.result.jiangpin; }); },6000); }, stopPlay(){//停止切换 var self=this; self.$refs.swiper1.swiper.autoplay.stop(); }, quickly(){//加快 var self=this; self.$refs.swiper1.swiper.params.speed=100; }, slowLy(){//减缓 var self=this; self.$refs.swiper1.swiper.params.speed=2000; }, stopBy(curIndexArr){//到第几个停止 var self=this; self.$refs.swiper1.swiper.on('slideChange', function () { if(self.$refs.swiper1.swiper.activeIndex==curIndexArr[0]){ self.$refs.swiper1.swiper.autoplay.stop(); self.$refs.swiper1.swiper.on('transitionEnd',function(){ if(self.$refs.swiper1.swiper.activeIndex==curIndexArr[0]){ self.allSwiperTransitionEnd[0]=true;//swiper1停止 if(self.allSwiperTransitionEnd[0]&&self.allSwiperTransitionEnd[1]&&self.allSwiperTransitionEnd[2]){ self.runing=false;//已停止 }; self.$refs.swiper1.swiper.off('slideChange'); self.$refs.swiper1.swiper.off('transitionEnd'); } }); } }); self.$refs.swiper2.swiper.on('slideChange', function () { if(self.$refs.swiper2.swiper.activeIndex==curIndexArr[1]){ self.$refs.swiper2.swiper.autoplay.stop(); self.$refs.swiper2.swiper.on('transitionEnd',function(){ if(self.$refs.swiper2.swiper.activeIndex==curIndexArr[1]){ self.allSwiperTransitionEnd[1]=true;//swiper2停止 if(self.allSwiperTransitionEnd[0]&&self.allSwiperTransitionEnd[1]&&self.allSwiperTransitionEnd[2]){ self.runing=false;//已停止 }; self.$refs.swiper2.swiper.off('slideChange'); self.$refs.swiper2.swiper.off('transitionEnd'); } }); } }); self.$refs.swiper3.swiper.on('slideChange', function () { if(self.$refs.swiper3.swiper.activeIndex==curIndexArr[2]){ self.$refs.swiper3.swiper.autoplay.stop(); self.$refs.swiper3.swiper.on('transitionEnd',function(){ self.allSwiperTransitionEnd[2]=true;//swiper3停止 if(self.allSwiperTransitionEnd[0]&&self.allSwiperTransitionEnd[1]&&self.allSwiperTransitionEnd[2]){ self.runing=false;//已停止 }; if(self.$refs.swiper3.swiper.activeIndex==curIndexArr[2]){ self.$refs.swiper3.swiper.off('slideChange'); self.$refs.swiper3.swiper.off('transitionEnd'); } }); } }); }, stopAllAutoplay(){ var self=this; self.$refs.swiper1.swiper.autoplay.stop();//停止swiper自动切换 self.$refs.swiper2.swiper.autoplay.stop();//停止swiper自动切换 self.$refs.swiper3.swiper.autoplay.stop();//停止swiper自动切换 }, counterResult(){//根据概率 产生中奖结果 var self=this; var allArr=[]; self.result=[]; for(let i=0,len=self.gailv.length;i<len;i++){ for(let j=0,jLen=self.gailv[i].gailv;j<jLen;j++){ allArr.push(self.gailv[i]); } } self.result=allArr[Math.floor(Math.random() * 1000)];//生成中奖结果 self.curIndexArr=[]; var a,b,c; if(self.result.jiangpin=="谢谢参与"){ a=Math.floor(Math.random()*5);//生成[0,5)的随机整数 c=Math.floor(Math.random()*5); function productB(){//产生b b=Math.floor(Math.random()*5); if(b==a){ productB();//如果b和a相等，则再次生成b } } productB(); }else{ a=b=c=self.result.index; } self.curIndexArr.push(a,b,c); } } } </script> <style scoped> @import url("../style/outSwiperStyle.css"); .selfLotteryBox{ position: absolute; top:0; left:0; right:0; bottom:0; overflow-y: auto; background:url("http://kexiepingtaieposter.hoohui.cn//registFile/fa5df7c9-445d-4b58-97c4-ad8b86a92241/Z0134_201911201601.jpeg") no-repeat center center; background-size:100% 100%; /* padding-top:250px; */ } .centerContent{ padding:0px 0; background:#ffffff; position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); width:96%; } .swiper_out_box{ height:420px; width:100%; position: relative; /* overflow: hidden; */ } .swiper_slide_innerBox{ text-align: center; font-size:14px; height:420px; font-weight: bold; /* padding:20px; */ box-sizing: border-box; position: relative; } .swiper_slide_innerBox img{ position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); width:80%; height:auto; } .bannerBox{ } .bannerBox img{ width:100%; height:auto; } .resultBox{ text-align: center; font-size: 30px; font-weight: bold; color:red; } .selfBtn{ width:100px; height:100px; background:#ff4a05; outline: none; border:0; font-size:20px; font-weight: bold; } </style>
。。。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
