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>
。。。
s-w-i-p-e-r做一个-老-唬-机-抽-蒋的更多相关文章
- 如何用ESP8266/8285做一个WIFI广告机（虚拟WiFi）
准备工作 准备一个深圳四博智联科技有限公司的ESP-F 模组.或者四博智联科技的NODEMCU 当我们拿到ESP-F模块后,可以按照以下接线进行测试: 即 VCC.EN 接 3.3v.GPIO15 G ...
- R数据分析：跟随top期刊手把手教你做一个临床预测模型
临床预测模型也是大家比较感兴趣的,今天就带着大家看一篇临床预测模型的文章,并且用一个例子给大家过一遍做法. 这篇文章来自护理领域顶级期刊的文章,文章名在下面 Ballesta-Castillejos ...
- python之做一个简易的翻译器(一)
平时经常在网上翻译一些单词,突发奇想,可不可以直接调某些免费翻译网站的接口呢?然后做一个图形界面的翻译小工具?下面开始实践 1.先找一下有哪些免费翻译的接口 百度了一下关键字“免费翻译接口”,然后找到 ...
- 在使用R做数据挖掘时，最常用的数据结构莫过于dataframe了，下面列出几种常见的dataframe的操作方法
原网址 http://blog.sina.com.cn/s/blog_6bb07f83010152z0.html 在使用R做数据挖掘时,最常用的数据结构莫过于dataframe了,下面列出几种常见的d ...
- [Js插件]使用JqueryUI的弹出框做一个“炫”的登录页面
引言 查看项目代码的时候,发现项目中用到JqueryUi的弹出框,可拖拽,可设置模式对话框,就想着使用它弄一个登录页面. 弹出框 在Jquery Ui官网可定制下载弹出框,下载和弹出框下载相关的js文 ...
- 自然语言处理NLP学习笔记三：使用Django做一个NLP的Web站点
前言: 前面我们已经能初步实现一个中文自然处理语言的模型了,但交互界面是命令行的,不太友好. 如果想做一个类似http://xiaosi.trs.cn/demo/rs/demo的界面,那就还需要继续往 ...
- 用Django加PIL做一个证件照模板生成器网页
最近在整理自己的简历,发现简历上面的ID照有些太老了,所以就准备重新准备一些证件照,刚好最近在弄自己的博客网站,想着直接做一个网页工具出来,直接生成证件照模板,这样还可以省去PS的麻烦.而且照片涉及到 ...
- 用CSS3的transform来做一个立方体
有一次上数据结构课老师布置了一个用队列的思想通过js和Html来做一个“跳舞配对”的网页,当时那个跳舞的部分用了css3里面transform的相关属性做了个个让图片无限翻转的效果,可能正是由于这个效 ...
- 涨姿势：创业做一个App需要花多少钱（8个人，6个月，就要100万，附笔记心得）
(原标题:涨姿势:创业做一个App要花多少钱?) 作为互联网从业者,被外行的朋友们问及最多的问题是,“做一个网站需要多少钱?”或者“做一个APP需要多少钱?”. 作为做过完整网站项目和APP的人,今天 ...
随机推荐
- 织梦安全防护：禁止uploads、data、templets执行脚本
下面介绍下如何针对uploads.data.templets做PHP脚本限制:对uploads.data.templets 三个目录做执行php脚本限制,就算被上传了木马文件到这些文件夹,也是无法运行 ...
- web开发工具flask中文英文书籍-持续更新
web开发工具flask中文英文书籍-持续更新 python测试开发_AI命理关注 0.9222018.11.10 07:48:43字数 625阅读 885 python测试开发项目实战-目录 pyt ...
- flutter从入门到精通三
flutter可以通过一套代码运行在多个平台上,包括移动,web,桌面,嵌入式,但是在 Web 平台的支持尚未达到 Beta 阶段,请不要用在生产环节,在阅读文档时候,推荐大家阅读https://fl ...
- 在论坛中出现的比较难的sql问题：31(row_number函数+子查询 月环比计算)
原文:在论坛中出现的比较难的sql问题:31(row_number函数+子查询 月环比计算) 所以,觉得有必要记录下来,这样以后再次碰到这类问题,也能从中获取解答的思路.
- winserver2012远程桌面进入只有CMD窗口，无桌面解决方法
原因:.net framework4.5是Windows server图形化界面的基础,系统还原时只装了核心模式core,系统没有了图形界面当然只有cmd了 解决方法:使用dism命令需要将核心模 ...
- 微信小程序通讯录字母排序
微信小程序通讯录 字母排序效果: demo地址:https://github.com/PeachCoder/wechat-contacts
- HTML认识一
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- MD 使用 i5ting_toc 转换成 HTML
MD 使用 i5ting_toc 转换成 HTML 本文作者:天析 作者邮箱:2200475850@qq.com 发布时间: Wed, 10 Jul 2019 13:59:00 +0800 前言 md ...
- py map reduce filter 总结
array=[1,3,4,71,2] ret=[] for i in array: ret.append(i**2) print(ret) #如果我们有一万个列表,那么你只能把上面的逻辑定义成函数 d ...
- spark 机器学习 knn原理(一)
1.knnK最近邻(k-Nearest Neighbor,KNN)分类算法,在给定一个已经做好分类的数据集之后,k近邻可以学习其中的分类信息,并可以自动地给未来没有分类的数据分好类.我们可以把用户分 ...