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>

。。。

 效果图：

 简单的例子，样式待调整