图片之间的自动向上翻滚同时配上触摸动作

最近一个微信开发的项目需要实现一个功能，三张图片的自动向上翻滚显示，同时还要配上手指的向上触摸动作；在我看来难点在于，定时器启动之后手指的触摸动作位于哪一张，然后得做判断在继续执行定时器；我是使用参数来判断的；然后三张图片都显示完后就要展示一个玩法页面，然后再是上传照片页面，这边我就没有贴出来，直接显示主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();		
				});

			});

		});