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的人,今天 ...
随机推荐
- Java安装和环境配置
Java安装和环境配置 从事Java开发第一关就是安装JAVA环境. 我们要安装JDK, 全称Java开发全套. 其中包含了JRE(运行时环境), 如果你打游戏的时候可能会提示你缺少JRE. 我们要做 ...
- codeforce 849D. Make a Permutation!
D. Make a Permutation! time limit per test 2 seconds memory limit per test 256 megabytes input stand ...
- collections.defaultdict()的使用
这里的defaultdict(function_factory)构建的是一个类似dictionary的对象,其中keys的值,自行确定赋值,但是values的类型,是function_factory的 ...
- elk docker-compose
version: '3.1' services: elasticsearch: image: docker.elastic.co/elasticsearch/elasticsearch:6.2.4 c ...
- wstngfw中配置freeradius
wstngfw中配置freeradius Radius为各种网络设备和服务提供了一个认证来源. Radius认证常用于***.入网门户.交换机.路由器和防火墙.Radius认证比在网络上的不同设备跟踪 ...
- oracle 的分页、截断查询
oracle 分页.截断查询 需求:从车管所的备案库中(oracle)取出数据,放到车综大数据平台(http方式) 现场情况:oracle中有三张表,CZRKXX(常住人口信息),ZDRYXX(重点人 ...
- 步步截图的SMM框架入门实战指引（SpringBoot、Mybatis Plus、Maven）
前提是对spring.springmvc.mybatis有初步学习和理解,因为要全部讲这些框架的知识点太多了,自己学习,这里是实战示范(大部分人学了知识之后去实战会出现很多问题,所以出此教程) 开发环 ...
- SDcms1.8代码审计
由于工作原因,分析了很多的cms也都写过文章,不过觉得好像没什么骚操作都是网上的基本操作,所以也就没发表在网站上,都保存在本地.最近突然发现自己博客中实战的东西太少了,决定将以前写的一些文章搬过来,由 ...
- Android笔记（十） Android中的布局——表格布局
TableLayout运行我们使用表格的方式来排列控件,它的本质依然是线性布局.表格布局采用行.列的形式来管理控件,TableLayout并不需要明确的声明包含多少行多少列,而是通过添加TableRo ...
- 使用华为云+GitHub搭建自己的博客
1.搭建自己博客首先创建GitHub账号 在GitHub官网上创建一个账号: 我的账号地址是 : https://github.com/SueKayTian 2.GitHub账号创建好之后,客户端 ...