79 lines
2.1 KiB
HTML
79 lines
2.1 KiB
HTML
|
<!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>
|