シンプルなセレクタバーをシンプルなJavaScriptスライドショーに追加するには？

Question

私は過去2時間のように少しjavascriptを教えたので、私と一緒に熊。

私は既に、ウェブサイト用の非常に簡単なスライドショーのための簡単なコードを用意しています。これはjavascriptのである（「スライド」クラスが0の不透明度を持っている、「現在の」クラスは、これだけのように、1つの「現在」を示し、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と私は5を作ったHTMLを使用します小さな正方形がスライドショーの下に並んでいて、私は各四角形がスライドショーにある5つの写真の1つに対応するようにしたいので、クリックするとスライドショーがその画像に移動し、その点から自動スライドショーループが続きます。

これは5つの四角（各四角のクラスは、「セレクタ」である）のためのHTMLです：「onclickの」の部分については

<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> 

、私は新しいJavaScriptを実行するためにそれを言っていたことを考えました私はこのコードの一部であったいわゆる「SelectSlide（N）」に入れ機能：私はチュートリアルで見たものによると

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

は、私はこれが（n）が必要とスライドの数を取るだろうと思いました'Current'が 'n'に等しいSlideMove関数を実行します。だから、私は単に「現在の」値を選択されていた値にして、単にその点からスライドショー・ループを開始すると思ったが、全く機能しない。セレクタボックスの1つをクリックすると、選択したい画像が表示されますが、前の画像を隠すことはなく、全体が混乱しているように見えます。そして、新たに選択された画像はランダムに消えてしまいます。

これは、自動スライド変更ループのアルゴリズムと、以前のスライドを隠していないという事実とはまったく関係がありますが、その方法はわかりません。どんな助けもありがとう。

この質問があまりにも混乱しているように見えるか、または何らかの理由で不十分に書かれていると思われる場合は、私に明確に依頼してください。

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>