1

html/SignIn/tenInfo.html

@@ -103,6 +103,38 @@
 			}
             #container>div {
                 left: -5%;
+            }
+			#tenImg{
+				width: 57%;
+				position: absolute;
+				left: -26%;
+				top: -10%;
+			}
+			.character{
+				width: 230px;
+				height: 305px;
+				background-image: url('../../images/tenreweu.png');
+				background-size: 100% 100%;
+				background-repeat: no-repeat;
+				position: absolute;
+				top: 50%;
+				left: 50%;
+				margin-left: -115px;
+				margin-top: -152px;
+				display: none;
+
+			}
+			.img_show{
+				width: 200px;
+				height: 200px;
+				margin-left: 15px;
+				margin-top: 10px;
+			}
+			.character p{
+				font-size: 40px;
+				color: #FFFFFF;
+				text-align: center;margin-top: 20px;
+
 			}
 		</style>
         <link rel="stylesheet" href="../../css/moveAnimate.min.css">
@@ -126,9 +158,16 @@
               <video src="../../video/NHQDQ9.mp4" autoplay="autoplay" loop="loop" muted="muted" id="homeBGvideo"></video>
             </div>
             <div class="">
-                <div id="container"></div>
+                <div id="container">
+
+				</div>
 
 			</div>
+			<div class="character animated">
+				<img src="" alt="" class="img_show">
+				<p></p>
+			</div>
+
 		</div>
         <audio id="audio" autoplay>您的浏览器不支持 audio 元素。</audio>
 		<script>
@@ -323,8 +362,37 @@
 			}
 
 			function render() {
+
 				renderer.render( scene, camera );
 			}
+			$('#container>div>div').append('<img id="tenImg" src="../../images/tenyear/home_1.png">')
+			photoshow()
+			function photoshow() {
+
+				let i =0;
+				let timer = setInterval(function () {
+					let key = getRandomNumberByRange(0,22) +1;//随即数
+					$('.character').css('display','block')
+					$('.character p').html(imgList[i])
+					$(".img_show").attr("src",'../../images/tenyear/'+imgList[i]+'.jpg');
+					$(".character").addClass(_in[key])
+					setTimeout(function () {
+						$(".character").removeClass(_in[key])
+						$(".character").addClass(_out[key])
+					},4000)
+					setTimeout(function () {
+						$(".character").removeClass(_out[key])
+
+					},5000)
+					i++
+					if(i+1 == imgList.length){
+						clearInterval(timer)
+					}
+				},5000)
+			}
+			function getRandomNumberByRange(start, end) {
+				return Math.floor(Math.random() * (end - start) + start)
+			}
 		</script>
 
 	</body>