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

Question

我自学了一点javascript，过去像2个小时，所以忍受着我。

我已经有一个简单的代码为一个非常简单的幻灯片为一个网站。这是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在幻灯片放映中排列起来的小方块，我希望每个方块都对应于我在幻灯片中显示的5张照片中的一张，这样当它被点击时，幻灯片将移动到该图片并从该点继续自动幻灯片循环。

这是5个格的HTML（类为每平方米是“选择”）：

<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”的一部分，我认为我告诉它来执行一个新的JavaScript功能我把所谓的“SelectSlide（N）”，这是这部分代码：

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

据我在教程中所看到的，我认为这会采取所需的幻灯片的数量（n） ，并使用'Current'等于'n'来执行SlideMove函数。所以，我认为它只是简单地将'当前'值设置为正在选择的值，并且从这一点开始简单地开始幻灯片循环，但它根本不起作用。当我点击其中一个选择框时，它会显示我想要选择的图像，但它不会隐藏前一个图像，整个事情看起来像一团糟。然后新选择的图像将随机消失。

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

如果这个问题看起来太混乱，或者出于任何原因写得不好，请随时要求我澄清。

Answer 1

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

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>