是否有可能创建一个HTML幻灯片来命名div，而不是用数字来引用它们呢？

Question

我正在尝试制作一个类似于这张是w3schools写的的幻灯片。

只是我的幻灯片多了很多。我也有单独的按钮，带你到一个特定的幻灯片。因此，如果我这样做：onclick="currentDiv(5)"，然后添加一个幻灯片在开始，按钮将转到错误的幻灯片。我正在寻找一种方法来做这样的事情：onclick="currentDiv(forrest)"

编辑：

抱歉我太宽了。我会尽量详细说明的。我目前正在学习html，并尝试学习javascript、css和php。但我还没有学到足够的知识来改变我现有的脚本来完成这个任务。我会尽量说得更具体一点。我有一堆幻灯片。我添加了按钮带你到一个特定的幻灯片。所以我有一个按钮带你去幻灯片7，问题是如果我添加一个新的幻灯片，比如说在第3位置，它会把剩下的幻灯片撞坏。旧的幻灯片6现在是7。所以我的按钮指的是7的新位置上的旧幻灯片6。按钮不知道幻灯片7移动到了8。如果我能做一些类似于onclick="currentDiv(forrest)“的事情，那么如果顺序发生变化，那就无关紧要了。

Answer 1

@ChrisG帮我解决了这个问题。我只是在这里张贴的答案，以供今后参考和标记它解决了。谢谢克里斯！

这里有一个小提琴：jsfiddle.net/fp39h2yk (也是:是的，这显然是可能的。)这是微不足道的。答案是学习JavaScript，而不是从w3schools复制粘贴脚本)

HTML：

<button onclick="currentDiv('forest');">
  Forest
</button>

<div class="w3-content" style="max-width:1200px">
  <img name="city" class="mySlides" src="img_nature_wide.jpg" style="width:100%">
  <img name="mountains" class="mySlides" src="img_fjords_wide.jpg" style="width:100%">
  <img name="forest" class="mySlides" src="img_mountains_wide.jpg" style="width:100%">
</div>

Javascript：

function currentDiv(n) {
  if (isNaN(n)) {
    var slides = document.getElementsByClassName("mySlides");
    var found = 0;
    for (var i = 0; i < slides.length; i++) {
      if (slides[i].getAttribute("name") == n) {
        found = i + 1;
        break;
      }
    }
    if (!found) return;
    n = found;
  }
  showDivs(slideIndex = n);
}

function showDivs(n) {
  alert("showing slide " + n);
}