yaasita/slide.html

## slide.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>slide</title>
  </head>
  <body>
    <p>
      <span id="val"></span>
      <input type="text" size="4" id="input" />
    </p>
    <div>
      <img id="pic" src="" />
    </div>
    <script>
      const img = document.getElementById("pic");
      const val = document.getElementById("val");
      const input = document.getElementById("input");
      let num = 0;
      let list = [];

      (async () => {
        const res = await fetch("./");
        const parser = new DOMParser();
        const htmlDoc = parser.parseFromString(await res.text(), "text/html");
        const tr = htmlDoc.querySelectorAll("tr");
        for (let i = 0; i <= tr.length - 1; i++) {
          let link;
          try {
            link = tr[i].querySelector("a");
          } catch (error) {
            continue;
          }
          if (!link) {
            continue;
          }
          const filename = link.getAttribute("href");
          if (filename.match(/\.(jpg|png)/)) {
            list.push(filename);
          }
        }
        change(num);
      })().catch((e) => {
        console.log(e);
        process.exit(1);
      });

      img.addEventListener("click", () => {
        change(num + 1);
      });
      img.addEventListener("contextmenu", (event) => {
        change(num - 1);
        event.preventDefault();
      });
      input.addEventListener("change", () => {
        change(input.value);
      });
      document.addEventListener("keydown", (event) => {
        switch (event.key) {
          case "ArrowUp":
            change(num + 10);
            event.preventDefault();
            break;
          case "ArrowDown":
            change(num - 10);
            event.preventDefault();
            break;
          case "ArrowLeft":
            change(num - 1);
            event.preventDefault();
            break;
          case "ArrowRight":
            change(num + 1);
            event.preventDefault();
            break;
        }
      });
      function change(n) {
        num = Number(n);
        if (num < 0) {
          num = 0;
        }
        if (num > list.length - 1) {
          num = list.length - 1;
        }
        img.src = list[num];
        val.innerHTML = `${num} / ${list.length - 1}`;
        input.value = num;
      }
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8" />
	<title>slide</title>
	</head>
	<body>
	<p>
	<span id="val"></span>
	<input type="text" size="4" id="input" />
	</p>
	<div>
	<img id="pic" src="" />
	</div>
	<script>
	const img = document.getElementById("pic");
	const val = document.getElementById("val");
	const input = document.getElementById("input");
	let num = 0;
	let list = [];

	(async () => {
	const res = await fetch("./");
	const parser = new DOMParser();
	const htmlDoc = parser.parseFromString(await res.text(), "text/html");
	const tr = htmlDoc.querySelectorAll("tr");
	for (let i = 0; i <= tr.length - 1; i++) {
	let link;
	try {
	link = tr[i].querySelector("a");
	} catch (error) {
	continue;
	}
	if (!link) {
	continue;
	}
	const filename = link.getAttribute("href");
	if (filename.match(/\.(jpg\|png)/)) {
	list.push(filename);
	}
	}
	change(num);
	})().catch((e) => {
	console.log(e);
	process.exit(1);
	});

	img.addEventListener("click", () => {
	change(num + 1);
	});
	img.addEventListener("contextmenu", (event) => {
	change(num - 1);
	event.preventDefault();
	});
	input.addEventListener("change", () => {
	change(input.value);
	});
	document.addEventListener("keydown", (event) => {
	switch (event.key) {
	case "ArrowUp":
	change(num + 10);
	event.preventDefault();
	break;
	case "ArrowDown":
	change(num - 10);
	event.preventDefault();
	break;
	case "ArrowLeft":
	change(num - 1);
	event.preventDefault();
	break;
	case "ArrowRight":
	change(num + 1);
	event.preventDefault();
	break;
	}
	});
	function change(n) {
	num = Number(n);
	if (num < 0) {
	num = 0;
	}
	if (num > list.length - 1) {
	num = list.length - 1;
	}
	img.src = list[num];
	val.innerHTML = `${num} / ${list.length - 1}`;
	input.value = num;
	}
	</script>
	</body>
	</html>