更新轮播图和拍照定时

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}

index.html

@@ -113,6 +113,7 @@
         <div data-msg="3" class="swiper-slide style-3"></div>
         <div data-msg="4" class="swiper-slide style-4"></div>
         <div data-msg="5" class="swiper-slide style-5"></div>
+        <div data-msg="6" class="swiper-slide style-6"></div>
       </div>
     </div>
   </div>
@@ -201,21 +202,31 @@
       </div>
       <div class="tips">正在切换画风</div>
     </div>
-    <div class="content face-4">
+    <div class="content face-6">
       <div class="tips">
         将于1秒后拍摄
       </div>
     </div>
-    <div class="content face-3">
+    <div class="content face-5">
       <div class="tips">
         将于2秒后拍摄
       </div>
     </div>
-    <div class="content face-2">
+    <div class="content face-4">
       <div class="tips">
         将于3秒后拍摄
       </div>
     </div>
+    <div class="content face-3">
+      <div class="tips">
+        将于4秒后拍摄
+      </div>
+    </div>
+    <div class="content face-2">
+      <div class="tips">
+        将于5秒后拍摄
+      </div>
+    </div>
     <div class="content face-1">
       <div class="tips">
         快望向你身前的艺术<br>照设备，准备拍照啦

static/css/app.css

@@ -227,6 +227,15 @@ body {
   background-image: url("../images/icon/face-4.png");
   background-size: 30%;
 }
+.app-action-tips .content.face-5 {
+  background-image: url("../images/icon/face-4.png");
+  background-size: 30%;
+}
+.app-action-tips .content.face-6 {
+  background-image: url("../images/icon/face-4.png");
+  background-size: 30%;
+}
+
 .app-action-tips .content.loading {
   background-color: rgba(255, 255, 255, 0.9);
 }
@@ -410,6 +419,12 @@ body {
 .app-switch .stl-swiper .style-5.active {
   background-image: url("../images/styles/5-active.png");
 }
+.app-switch .stl-swiper .style-6 {
+  background-image: url("../images/styles/6.png");
+}
+.app-switch .stl-swiper .style-6.active {
+  background-image: url("../images/styles/6-active.png");
+}
 
 
 /* 风景 */

static/js/app.js

@@ -92,6 +92,7 @@ var app = {
                 <div data-msg="3" class="swiper-slide style-3"></div>
                 <div data-msg="4" class="swiper-slide style-4"></div>
                 <div data-msg="5" class="swiper-slide style-5"></div>
+                <div data-msg="6" class="swiper-slide style-6"></div>
             </div>`
         } else{
             html = `<div class="swiper-wrapper">
@@ -100,6 +101,7 @@ var app = {
                 <div data-msg="3" class="swiper-slide style-3"></div>
                 <div data-msg="4" class="swiper-slide style-4"></div>
                 <div data-msg="5" class="swiper-slide style-5"></div>
+                <div data-msg="6" class="swiper-slide style-6"></div>
             </div>`
         }
         $elem.html(html)
@@ -300,7 +302,7 @@ var app = {
         $elem.find('.content.face-' + flag).show()
         $elem.animateCss('zoomIn', function () {
             var timer = setInterval(() => {
-                if (++flag > 4) {
+                if (++flag > 6) {
                     $elem.removeClass('animated zoomIn');
                     clearInterval(timer)
                     if (!app.is_action) {