如何爲簡單的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>