前端

2023-09-18 11:21:50 +08:00
parent 8038f02f30
commit 85e41f3ef9
31 changed files with 1802 additions and 30 deletions
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="author" content="flykhan" />
+    <meta name="keywords" content="c c++ 物联网" />
+    <title>图片播放器</title>
+
+    <style>
+      #preImg {
+        /* padding: 50px; */
+        margin: 50px;
+      }
+
+      #preImg:hover {
+        box-shadow: 0 0 20px 10px yellow;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="img-container">
+      <img id="preImg" src="./images/01.jpg" width="400" height="300" />
+    </div>
+    <button onclick="playImg(this)">play</button>
+    <script>
+      var isPlaying = false;
+      var intervalID; // 定时器的ID
+
+      function playImg(btn) {
+        // 事件的处理函数
+        if (isPlaying) {
+          btn.innerText = "play";
+          clearInterval(intervalID); // 关闭定时器
+        } else {
+          btn.innerText = "pause";
+          intervalID = setInterval(play_image_run, 1000); // 1000ms = 1s
+        }
+        isPlaying = !isPlaying;
+      }
+
+      var curImgIndex = 0;
+      var imgArr = [
+        "./images/01.jpg",
+        "./images/02.jpg",
+        "./images/03.jpg",
+        "./images/04.jpg",
+      ];
+      function play_image_run() {
+        curImgIndex++;
+        if (curImgIndex > 3) {
+          curImgIndex = 0;
+        }
+        console.log("---" + curImgIndex + "---");
+        console.log(imgArr[curImgIndex]);
+        preImg.setAttribute("src", imgArr[curImgIndex]);
+      }
+
+      function myplay() {
+        // 获取图片元素
+        let img = document.getElementById("preImg");
+        // 获取图片的 src 属性值
+        let src = img.src;
+        // 获取图片的文件名
+        let filename = src.substring(src.lastIndexOf("/") + 1);
+        // 获取图片的序号
+        let index = parseInt(filename.substring(0, 2));
+        // 生成新的图片序号
+        index = (index + 1) % 4;
+        // 生成新的图片文件名
+        filename = (index < 10 ? "0" : "") + index + ".jpg";
+        // 生成新的图片的 src 属性值
+        src = "./images/" + filename;
+        // 修改图片的 src 属性值
+        img.src = src;
+      }
+    </script>
+  </body>
+</html>