s-w-i-p-e-r做一个-老-唬-机-抽-蒋

<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>

。。。