s-w-i-p-e-r做一个-老-唬-机-抽-蒋
2024-08-27 08:50:22
<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>
。。。
最新文章
- TFS 2015 敏捷开发实践 – 看板的使用
- 微信开发 -- 搭建基于ngrok的微信本地调试环境
- Spring Mvc 的自定义拦截器
- cpu中断
- hdu2191 多重背包
- 《APUE》第四章笔记（2）
- [USACO10MAR]伟大的奶牛聚集
- 用word2013写博客
- Tomcat无法安装 Check your settings and permissions Ignore and continue anyway
- centos7如何关闭防火墙
- C语言－基础
- 【js数据结构】栈解决佩兹糖果盒问题
- 【转载】linux挂载mount参数优化
- Solr学习笔记1(V7.2)
- Java的URL类(一)
- 几种解决方法：idea 找不到符号或找不到包
- spring跨域问题
- 史上最全 40 道 Dubbo 面试题及答案，看完碾压面试官
- Java SE 之 数据库操作工具类(DBUtil)设计
- 解决boostrap中，iframe渲染下，苹果手机横向无法显示剩余内容问题