我正在制作一个图像滑块，当我使用javascript选择一个不同的列表标记以动态跟踪选择的列表标记并将其分配给相应的图像时，该滑块将相应地改变。但是，我不熟悉如下所示分配动态函数。有没有更好的方法来应用js来达到这个目的？
html

<ul>
              <li id="Menu1GC2" tabindex="1">
                Galaxy Z Fold2 | Z Flip<span class="underline"></span>
              </li>
              <li id="Menu2GC2" tabindex="1">
                Galaxy A22 5G<span class="underline"></span>
              </li>
              <li id="Menu3GC2" tabindex="1">
                Galaxy Free Trial<span class="underline"></span>
              </li>
              <li id="Menu4GC2" tabindex="1">
                Galaxy 21 | S21+ 5G<span class="underline"></span>
              </li>
              <li id="Menu5GC2" tabindex="1">
                Galaxy Buds Pro<span class="underline"></span>
              </li>
            </ul>

js

const gallery = [
  "/IMAGES/slider/img1.jpg",
  "/IMAGES/slider/img2.jpg",
  "/IMAGES/slider/img3.jpg",
  "/IMAGES/slider/img4.jpg",
  "/IMAGES/slider/img5.jpg",
];

let sliderListItem1 = document.getElementById("Menu1GC2");
let sliderListItem2 = document.getElementById("Menu2GC2");
let sliderListItem3 = document.getElementById("Menu3GC2");
let sliderListItem4 = document.getElementById("Menu4GC2");
let sliderListItem5 = document.getElementById("Menu5GC2");

let slider = document.getElementById("sliderGC2");

sliderListItem1.addEventListener("click", imgChang1);
sliderListItem2.addEventListener("click", imgChang2);
sliderListItem3.addEventListener("click", imgChang3);
sliderListItem4.addEventListener("click", imgChang4);
sliderListItem5.addEventListener("click", imgChang5);

function imgChang1() {
  slider.src = "/IMAGES/slider/img1.jpg";
}

function imgChang2() {
  slider.src = "/IMAGES/slider/img2.jpg";
}

function imgChang3() {
  slider.src = "/IMAGES/slider/img3.jpg";
}

function imgChang4() {
  slider.src = "/IMAGES/slider/img4.jpg";
}

function imgChang5() {
  slider.src = "/IMAGES/slider/img5.jpg";
}