javascript - 将响应所选元素的动态函数

Question

我正在制作一个图像滑块，当我使用 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";
}

标签： javascriptfunctionslider