最近一个微信开发的项目需要实现一个功能,三张图片的自动向上翻滚显示,同时还要配上手指的向上触摸动作;在我看来难点在于,定时器启动之后手指的触摸动作位于哪一张,然后得做判断在继续执行定时器;我是使用参数来判断的;然后三张图片都显示完后就要展示一个玩法页面,然后再是上传照片页面,这边我就没有贴出来,直接显示主kv了;
下面先贴上html结构,三张图片我都是使用背景来做的,为的是更好的适应各种手机屏,因为都是要满屏显示
<div id="content">
<!-- 主kv -->
<div class="start_btn">
<img src="" alt="开始背景" style="display: none;"/>
</div>
<!-- 游戏玩法 -->
<div id="gameRule">
<img src="img/gameRule.png" alt="">
<button class="gameRule_btn"></button>
</div>
</div>
<!-- 三张图片展示 -->
<div id="three_img">
<div class="img1">
<!-- 第一张照片展示 -->
</div>
<div class="img2">
<!-- 第二张照片展示 -->
</div>
<div class="img3">
<!-- 第一三张照片展示 -->
</div>
<!-- 三张图片展示结束 -->
</div>
下面是样式:(样式呢我是有外链我自己的重置样式,使用的是1rem=100px)
#content {
position: relative;
width: 100%;
height: 0;
margin: 0 auto;
background-image: url('img/home_bg.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
z-index: 2;
}
.start_btn {
width: 40%;
position: absolute;
top: 82%;
left: 32%;
}
#three_img {
width: 100%;
position: relative;
display: none;
}
#three_img .img1, #three_img .img2, #three_img .img3 {
width: 100%;
height: 0;
margin: 0 auto;
background-repeat: no-repeat;
background-size: 100% 100%;
}
#three_img .img1 {
background-image: url('img/img1.jpg');
display: none;
}
#three_img .img2 {
background-image: url('img/img2.jpg');
display: none;
}
#three_img .img3 {
background-image: url('img/img3.jpg');
display: none;
}
#up_loadImg{
position: relative;
width: 100%;
background-repeat: no-repeat;
background-size: 100% 100%;
background-color: rgba(27,27,32,0.9);
background-image: url('img/upLoadImg_bg1.png');
z-index: 6665;
display: none;
}
#gameRule {
position: relative;
width: 100%;
background-color: rgba(27,27,32,0.9);
padding: 10%;
display: none;
}
#gameRule img {
width: 100%;
}
#gameRule .gameRule_btn {
display: block;
position: absolute;
width: 12%;
height: 16%;
left: 80%;
top: 9%;
border: none;
background-color: rgba(0,0,0,0);
outline: none;
}
嗯,接下来就是我的js控制了,基于jquery的
$(function(){
var h = document.documentElement.clientHeight;//获取屏幕的高
$('#content, #three_img, #gameRule').css('height',h);
/* 三张图片轮播显示控制*/
var timer1 = null;
var timer2 = null;
var timer3 = null;
var time = 0;
var data_id = '';
var oCot = document.getElementById('content');
var aImg = document.getElementById('three_img').getElementsByTagName('div');
//因为我开始背景图片如果直接用img标签加载的话,会最先加载出来不和谐,所以直接用赋值的方法来
$('.start_btn img').attr('src','img/start.png');
$('.start_btn img').css('display','block');
//点击开始按钮,然后显示三张照片的第一张
$('.start_btn').on('click', function(){
$('.img1, .img2, .img3').css('height',h);
$('#content').hide();
$('#three_img').show();
$('.img1').show();
time = 1;
showImg2();
$('.img1').on('touchmove', function(){
time = 1;
$('.img1').slideUp(2000);//控制上下翻滚动画的长久时间
$('.img2').slideDown(2000);
clear();
showImg3();
$('.img2').on('touchmove', function(){
time = 2;
$('.img2').slideUp(2000);//控制上下翻滚动画的长久时间
$('.img3').slideDown(2000);
clear();
showLoadImg();
$('.img3').on('touchmove', function(){
clear();
$('#three_img').hide();
$('#content').show();
$('#rule').hide();
$('#up_loadImg').hide();
$('#gameRule').show();
});
});
});
//检测在执行定时器的时候有没有手指触摸事件
$('#three_img').on('touchmove',function(){
clear();//手指一触摸的时候就要停止定时器,然后做判断看是在哪张图片上触摸
if ( time == 1 ){//在第一张图片上触摸
$('.img1').slideUp(2000);//控制上下翻滚动画的长久时间
$('.img2').slideDown(2000);
showImg3();
} else if( time == 2 ){//在第二张图片上触摸
clear();
$('.img2').slideUp(2000);//控制上下翻滚动画的长久时间
$('.img3').slideDown(2000);
showLoadImg();
}else if(time == 3){//在第三张图片上触摸
clear();
$('#three_img').hide();
$('#content').show();
$('#rule').hide();
$('#up_loadImg').hide();
$('#gameRule').show();
}
});
function showImg2() {
if( aImg[0].style.display == 'block' ){
timer1 = setTimeout(function(){
time = 2;
$('.img1').slideUp(2000);//控制上下翻滚动画的长久时间
$('.img2').slideDown(2000);
if( aImg[1].style.display == 'block' ){
timer2 = setTimeout(function(){
time = 3;
$('.img2').slideUp(2000);//控制上下翻滚动画的长久时间
$('.img3').slideDown(2000);
if( aImg[2].style.display == 'block' ){
timer3 = setTimeout(function(){
$('#three_img').hide();
$('#content').show();
$('#rule').hide();
$('#up_loadImg').hide();
$('#gameRule').show();
}, 8000);//第三张照片停留的时间,注意动画时间的叠加
}
}, 8000);//第二张照片停留的时间,注意动画时间的叠加
}
}, 6000);//第一张照片停留的时间
}
}
function showImg3() {
if( aImg[1].style.display == 'block' ){
timer2 = setTimeout(function(){
time = 3;
$('.img1').slideUp(2000);//控制上下翻滚动画的长久时间
$('.img2').slideDown(2000);
console.log(2);
if( aImg[2].style.display == 'block' ){
timer3 = setTimeout(function(){
$('#three_img').hide();
$('#content').show();
$('#rule').hide();
$('#up_loadImg').hide();
$('#gameRule').show();
}, 8000);//第三张照片停留的时间,注意动画时间的叠加
}
}, 6000);//第二张照片停留的时间
}
}
function showLoadImg() {
if( aImg[2].style.display == 'block' ){
timer3 = setTimeout(function(){
$('#three_img').hide();
$('#content').show();
$('#rule').hide();
$('#up_loadImg').hide();
$('#gameRule').show();
}, 4000);//在第二张照片向上滑动的时候第三张照片停留的时间,别那么长,毕竟用户已经在滑动说明想往下走
}
}
function clear(){
clearTimeout(timer1);
clearTimeout(timer2);
clearTimeout(timer3);
}
//点击游戏玩法里面的叉叉按钮,然后显示上传照片页面
$('.gameRule_btn').on('click', function(){
clear();//这边点击也要停止定时器,不然因为定时器启动了就算你跳到了上传照片页也会跳回玩法页面
$('#three_img').hide();
$('#content').show();
$('#rule').hide();
$('#gameRule').hide();
$('#up_loadImg').show();
});
});
});