Xah Talk Show 2025-05-19 Ep658 coding JavaScript, interactive slide of images

• https://youtu.be/gYAvjTAdKDA

• JavaScript , write a module to do image slide
• Disney. Frozen - Let it Go 🎵
• Emacs: Compile TypeScript File 📜
• Epitrochoid and Hypotrochoid Animation Gallery
• Practical SVG Tutorial
• Jog Wheel, Shuttle Ring

const f_cycle_image = (pImgTagId, pImgPaths) => {
  const ximgTag = document.getElementById(pImgTagId);
  let xcurrentIndex = 0;

  // pre load images

  pImgPaths.forEach((x) => {
    (new Image()).src = x;
  });

  const f_switchToNextImg = () => {
    const xnextIndex = (xcurrentIndex + 1) % pImgPaths.length;
    ximgTag.setAttribute("src", pImgPaths[xnextIndex]);
    xcurrentIndex = xnextIndex;
  };

  const f_switchToPrevImg = () => {
    const xprevIndex = (xcurrentIndex + pImgPaths.length - 1) %
      pImgPaths.length;
    ximgTag.setAttribute("src", pImgPaths[xprevIndex]);
    xcurrentIndex = xprevIndex;
  };

  const f_keyboardHandler = (p_keydownEvent) => {
    // right arrow key
    if (p_keydownEvent.keyCode === 39) f_switchToNextImg();
    // left arrow key
    if (p_keydownEvent.keyCode === 37) f_switchToPrevImg();
  };

  const f_mouseWheelHandler = (x) => {
    if (x.deltaY > 0) {
      x.preventDefault();
      f_switchToNextImg();
    }
    if (x.deltaY < 0) {
      x.preventDefault();
      f_switchToPrevImg();
    }
  };

  ximgTag.addEventListener("wheel", f_mouseWheelHandler, false);

  document.body.addEventListener("keydown", f_keyboardHandler, false);
};

{
  const img_tag_id = "id_img_xl";

  const ximgPaths = [
    "i/frozen/Frozen_71.jpg",
    "i/frozen/Frozen_72.jpg",
    "i/frozen/Frozen_73.jpg",
    "i/frozen/Frozen_74.jpg",
    "i/frozen/Frozen_75.jpg",
    "i/frozen/Frozen_77.jpg",
    "i/frozen/Frozen_79.jpg",
    "i/frozen/Frozen_80.jpg",
    "i/frozen/Frozen_81.jpg",
    "i/frozen/Frozen_82.jpg",
    "i/frozen/Frozen_83.jpg",
    "i/frozen/Frozen_84.jpg",
    "i/frozen/Frozen_85_queen_Elsa.jpg",
    "i/frozen/Frozen_86.jpg",
    "i/frozen/Frozen_87.jpg",
    "i/frozen/Frozen_88.jpg",
    "i/frozen/Frozen_89.jpg",
    "i/frozen/Frozen_90.jpg",
    "i/frozen/Frozen_91.jpg",
    "i/frozen/Frozen_92.jpg",
    "i/frozen/Frozen_93.jpg",
    "i/frozen/Frozen_94.jpg",
    "i/frozen/Frozen_95.jpg",
    "i/frozen/Frozen_96.jpg",
  ];

  f_cycle_image(img_tag_id, ximgPaths);
}