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的人,今天 ...
随机推荐
- Windows服务器修改远程桌面默认端口
一.打开注册表(通过开始菜单处输入命令输入 regedit回车即可打开注册表信息,或者Win键+R键打开输入框后输入regedit后回车) 二.打开注册表后,在左侧属性菜单进入下列路径“HKEY_LO ...
- Jackson之LocalDateTime转换，无需改实体类
[问题] Demo: LocalDateTime dt = LocalDateTime.now(); ObjectMapper mapper = new ObjectMapper(); try { S ...
- Java中@SuppressWarnings（"unchecked"）的作用
J2SE 提供的最后一个批注是 @SuppressWarnings.该批注的作用是给编译器一条指令,告诉它对被批注的代码元素内部的某些警告保持静默. 一点背景:J2SE 5.0 为 Java 语言增加 ...
- C#委托，匿名方法，Lambda，泛型委托，表达式树代码示例
第一分钟:委托 有些教材,博客说到委托都会提到事件,虽然事件是委托的一个实例,但是为了理解起来更简单,今天只谈委托不谈事件.先上一段代码: 下边的代码,完成了一个委托应用的演示.一个委托分三个步骤: ...
- SpringMVC源码解读
1.SpringMVC简介 SpringMVC框架是围绕一个DispatherServlet来设计的.这个Servlet会把请求分发给各个处理器,并支持可配置的处理器映射.视图渲染.本地化.时区与主题 ...
- ES6中 对字符串增强
在曾经,我们只能用A.indexof(B)来判断A中是否含有B字符串: 现在在ES6中 有了: includes(), startswith(),endswith() reapt()重复次数: 输出 ...
- 动态URL是什么？动态URL有什么特点？
动态URL是什么动态URL就是动态页面,动态链接,即指在URL中出现“?”这样的参数符号,并以aspx.asp.jsp.php.perl.cgi为后缀的url. 动态URL有什么特点1.在建设反向链接 ...
- C++——inline function
前言 当代码写复杂后,一定会封装出大量的函数,这会导致两个问题: ①函数越多,栈的消耗也越厉害 疑问:为什么代码复杂了.函数变多了,栈消耗的就很厉害? 答:因为这会导致函数的调用深度可能会很深,比如: ...
- ubuntu 启动图形界面 sudo init 5
Linux系统最早期的时候只有命令行界面,所有的工作都需要用Linux命令来完成. 随着系统的发展,以及图形界面系统的出现,Linux也出现了图形界面,使得Linux系统不再是只有计算机的专业人士才可 ...
- 说说客户端访问一个链接URL的全过程
讲讲登录权限是如何控制的 我们可以把这个过程类比成一个电话对话的过程.当我们要打电话给某个人,首先要知道对方的电话号码,然后进行拨号.打通电话后我们会进行对话,当然要对话肯定需要共同的语言,如果一 ...