javascript - 如何为简单的 javascript 幻灯片添加简单的选择器栏？

Question

我在过去大约 2 小时自学了一些 javascript，所以请耐心等待。

我已经为一个非常简单的网站幻灯片准备了简单的代码。这是 javascript(“幻灯片”类的不透明度为 0，“当前”类的不透明度为 1，以便仅显示“当前”的):

<script>

var Slideshow = document.querySelectorAll('#slides .slide');
var Current = 0;
var Timer = setInterval(SlideMove,3000);

function SelectSlide(n) {
  SlideMove(Current = n);
}

function SlideMove(n) {
    Slideshow[Current].className = 'slide';
    Current = (Current+1)%Slideshow.length;
    Slideshow[Current].className = 'current slide';
}
</script>

我使用 CSS 和 HTML 在幻灯片下方制作了 5 个排列的小方 block ，我希望每个方 block 都与幻灯片中的 5 张照片中的一张相对应，以便在单击它时，幻灯片会移动到该图片并从该点继续自动幻灯片循环。

这是 5 个方 block 的 HTML(每个方 block 的类是“选择器”):

<div id="selectors">
  <span class="selector" onclick="SelectSlide(0)"></span> 
  <span class="selector" onclick="SelectSlide(1)"></span> 
  <span class="selector" onclick="SelectSlide(2)"></span> 
  <span class="selector" onclick="SelectSlide(3)"></span>
  <span class="selector" onclick="SelectSlide(4)"></span>
</div>

对于“onclick”部分，我认为我是在告诉它执行我放入的名为“SelectSlide(n)”的新 Javascript 函数，这是代码的这一部分:

function SelectSlide(n) {
  SlideMove(Current = n);
}

根据我在教程中看到的内容，我认为这将获取所需幻灯片的数量 (n)，并执行 SlideMove 函数，其中 'Current' 等于 'n'。所以，我认为它只会使“当前”值成为正在选择的值，并且它会从该点开始幻灯片循环，但它根本不起作用。当我单击其中一个选择器框时，它会显示我要选择的图像，但不会隐藏前一个图像，整个画面看起来一团糟。然后新选择的图像将随机消失。

我很确定这与自动幻灯片更换循环的算法有关，而且我没有隐藏上一张幻灯片，但我不知道该怎么做。任何帮助，将不胜感激。

如果出于任何原因这个问题看起来太困惑或写得不好，请随时让我澄清。

Answer 1

使用 display:none 和您自己的 javascript 代码隐藏/显示。

var Slideshow = document.querySelectorAll('#slides .slide');
var Current = 0;
var Timer = setInterval(SlideMove,3000);

function SelectSlide(n) {
  SlideMove(Current = n);
}

function SlideMove(n) {
    Slideshow[Current].className = 'slide';
    Current = (Current+1)%Slideshow.length;
    Slideshow[Current].className = 'current slide';
}

.slide{
  height:100px;
  display:none;
  background-size:100% 100%;
    background-size: 100% 100%;
    text-align: center;
    line-height: 0px;
    font-size: 0px;
    color: red;
}
.current{
  display:block;
}/*
.slide:nth-child(even){
  background:red;
}
.slide:nth-child(odd){
  background:green;
}*/

<div id="slides">
  <span class="slide current" onclick="SelectSlide(0)" style="background-image:url('https://placeholdit.imgix.net/~text?txtsize=77&bg=ff0000&txtclr=ffffff&txt=1230x373&w=1230&h=373');">0</span> 
  <span class="slide" onclick="SelectSlide(1)" style="background-image:url('https://placeholdit.imgix.net/~text?txtsize=77&bg=00ff00&txtclr=ffffff&txt=1230x373&w=1230&h=373');">1</span> 
  <span class="slide" onclick="SelectSlide(2)" style="background-image:url('https://placeholdit.imgix.net/~text?txtsize=77&bg=0000ff&txtclr=ffffff&txt=1230x373&w=1230&h=373');">2</span> 
  <span class="slide" onclick="SelectSlide(3)" style="background-image:url('https://placeholdit.imgix.net/~text?txtsize=77&bg=ffff00&txtclr=ffffff&txt=1230x373&w=1230&h=373');">3</span>
  <span class="slide" onclick="SelectSlide(4)" style="background-image:url('https://placeholdit.imgix.net/~text?txtsize=77&bg=000000&txtclr=ffffff&txt=1230x373&w=1230&h=373');">4</span>
</div>