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

问题描述

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

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";
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）