完成功能

.vscode/settings.json

+{
+  "less.compile": {
+    "outExt": ".wxss"
+  }
+}
\ No newline at end of file

pages/index/index.js

-// index.js
-// 获取应用实例
-const app = getApp()
-
 Page({
+
+  /**
+   * 页面的初始数据
+   */
   data: {
-    motto: 'Hello World',
-    userInfo: {},
-    hasUserInfo: false,
-    canIUse: wx.canIUse('button.open-type.getUserInfo'),
-    canIUseGetUserProfile: false,
-    canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName') // 如需尝试获取用户信息可改为false
+    time: 0,
+    timer: null,
+    imgId: 1
   },
-  // 事件处理函数
-  bindViewTap() {
-    wx.navigateTo({
-      url: '../logs/logs'
-    })
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
   },
-  onLoad() {
-    if (wx.getUserProfile) {
+
+  touchstart_fn(e) {
+    let timer = setInterval(() => {
       this.setData({
-        canIUseGetUserProfile: true
+        time: this.data.time + 1
       })
+      let temp = this.data.time % 9
+      if (temp >= 7) {
+        this.setData({ imgId: 5 })
+      } else if (temp >= 5) {
+        this.setData({ imgId: 4 })
+      } else if (temp >= 2) {
+        this.setData({ imgId: 3 })
+      } else if (temp >= 1) {
+        this.setData({ imgId: 2 })
       }
-  },
-  getUserProfile(e) {
-    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
-    wx.getUserProfile({
-      desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
-      success: (res) => {
-        console.log(res)
+      console.log(temp);
+    }, 1000);
     this.setData({
-          userInfo: res.userInfo,
-          hasUserInfo: true
-        })
-      }
+      timer
     })
   },
-  getUserInfo(e) {
-    // 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息
-    console.log(e)
-    this.setData({
-      userInfo: e.detail.userInfo,
-      hasUserInfo: true
-    })
+
+  touchend_fn(e) {
+    clearInterval(this.data.timer)
+    this.setData({ time: 0, imgId: 1 })
   }
 })
\ No newline at end of file

pages/index/index.less

+page {
+  .out {
+    position: fixed;
+    width: 428rpx;
+    height: 422rpx;
+    left: -20rpx;
+    right: 0rpx;
+    top: -10rpx;
+    bottom: 0;
+    margin: auto;
+  }
+  .in {
+    position: fixed;
+    width: 193rpx;
+    height: 169rpx;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+  }
+  .out4 {
+    left: 0rpx;
+    width: 430rpx;
+  }
+  .out5 {
+    left: -120rpx;
+    width: 530rpx;
+  }
+  .out2 {
+    left: -120rpx;
+    width: 530rpx;
+  }
+  .out3 {
+    left: -120rpx;
+    width: 680rpx;
+  }
+}
\ No newline at end of file

pages/index/index.wxml

-<!--index.wxml-->
-<view class="container">
-  <view class="userinfo">
-    <block wx:if="{{canIUseOpenData}}">
-      <view class="userinfo-avatar" bindtap="bindViewTap">
-        <open-data type="userAvatarUrl"></open-data>
-      </view>
-      <open-data type="userNickName"></open-data>
-    </block>
-    <block wx:elif="{{!hasUserInfo}}">
-      <button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button>
-      <button wx:elif="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
-      <view wx:else> 请使用1.4.4及以上版本基础库 </view>
-    </block>
-    <block wx:else>
-      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
-      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
-    </block>
-  </view>
-  <view class="usermotto">
-    <text class="user-motto">{{motto}}</text>
-  </view>
+<view class="wrap">
+  <image wx:if="{{imgId === 1}}" src="/imgs/1.png" class="out" />
+  <image wx:elif="{{imgId === 2}}" src="/imgs/4.png" class="out out4" />
+  <image wx:elif="{{imgId === 3}}" src="/imgs/5.png" class="out out5" />
+  <image wx:elif="{{imgId === 4}}" src="/imgs/2.png" class="out out2" />
+  <image wx:elif="{{imgId === 5}}" src="/imgs/3.png" class="out out3" />
+  <image src="/imgs/0.png" catch:touchstart="touchstart_fn" catch:touchend="touchend_fn" class="in" />
 </view>
\ No newline at end of file

pages/index/index.wxss

-/**index.wxss**/
-.userinfo {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  color: #aaa;
+page .out {
+  position: fixed;
+  width: 428rpx;
+  height: 422rpx;
+  left: -20rpx;
+  right: 0rpx;
+  top: -10rpx;
+  bottom: 0;
+  margin: auto;
 }
-
-.userinfo-avatar {
-  overflow: hidden;
-  width: 128rpx;
-  height: 128rpx;
-  margin: 20rpx;
-  border-radius: 50%;
+page .in {
+  position: fixed;
+  width: 193rpx;
+  height: 169rpx;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  margin: auto;
 }
-
-.usermotto {
-  margin-top: 200px;
+page .out4 {
+  left: 0rpx;
+  width: 430rpx;
+}
+page .out5 {
+  left: -120rpx;
+  width: 530rpx;
+}
+page .out2 {
+  left: -120rpx;
+  width: 530rpx;
+}
+page .out3 {
+  left: -120rpx;
+  width: 680rpx;
 }