<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>
。。。
效果图:
简单的例子,样式待调整