2017-07-08 2 views
0

最後のスライドが表示されたときにこのJavaScriptを停止して、次のボタンが機能しないようにします。示されています。前のボタンでは、それを押してスライダが最初のスライドにあるとき、現在のスライドに残ります。最後のスライドが表示されたときにこのJavaScriptを停止するにはどうすればいいですか?

Javascriptコード:

var slideIndex = 1; 
showDivs(slideIndex); 

function plusDivs(n) { 
    showDivs(slideIndex += n); 
} 

function showDivs(n) { 
    var i; 
    var x = document.getElementsByClassName('slide'); 
    if (n < 1) {slideIndex = 1;} 
    for (i = 0; i < x.length; i++) { 
     x[i].style.display = 'none'; 
    } 
    x[slideIndex-1].style.display = 'block'; 
    } 

HTMLコード:

<div class="links-to-wbp"> 
        <div class="slide"> 
         <a href="/physics/index.html"><img class="wbp" alt="thumb1" src="img/thumb1.png"/></a><a href="/francais/index.html"><img class="wbp" alt="thumb2" src="img/thumb2.png"/></a><a href="/strict/index.html"><img class="wbp" alt="thumb3" src="img/thumb3.png"/></a></div> 
       <div class="slide"> 
         <img class="wbp" alt="thumb4" src="img/thumb4.png"/><img class="wbp" alt="thumb5" src="img/thumb5.png"/><img class="wbp" alt="thumb6" src="img/thumb6.png"/></div> 
       <div class="slide"> 
         <img class="wbp" alt="thumb7" src="img/thumb7.png"/><img class="wbp" alt="thumb8" src="img/thumb8.png"/><img class="wbp" alt="thumb9" src="img/thumb9.png"/></div> 
        <div onclick="plusDivs(-1)" class="button previous_button">&#60;</div> 
        <div onclick="plusDivs(+1)" class="button next_button">&#62;</div> 
       </div> 

答えて

0

私は最後のスライドが表示されたときに、このJavaScriptの停止を作りたいので、 次のボタンが動作しないこと。

function showDivs(n) { 
    var i; 
    var x = document.getElementsByClassName('slide'); 
    if (n > x.length) {slideIndex = x.length} 
    if (n < 1) {slideIndex = 1;} 
    for (i = 0; i < x.length; i++) { 
     x[i].style.display = 'none'; 
    } 
    x[slideIndex-1].style.display = 'block'; 
    } 

が、以前と同じように:あなたのshowDivsの文はので、あなたのshowDivs機能は次のようになります

if (n > x.length) {slideIndex = x.length} 

を機能場合は、新しいを追加することができますそのために

ボタンを押します。前のボタンの については、それを押して、スライダが最初の スライドにあるとき、私はそれを現在のスライドに残したい。

+0

おかげで、それが働きました。 –

+0

ようこそ。 – Hassan

0

達成するために、

場合(N < 1){slideIndex = 1}:あなたshowDiv関数で次statemntの目的のthatsため

これは、既に作業しなければなりません期待される結果、showDivs関数に次の行を追加してください。

//add this line to stop after last slide 
    if(n > x.length){ 
     n= slideIndex =x.length; 
    } 

Codepen-https://codepen.io/nagasai/pen/vZVeZV

ソリューション:それはより多くの場合

言及した溶液の上には、次の値がスライドクラスの数(すなわち、この場合は3)

以上であるかどうかをチェックしますスライドクラスのカウント、リセットnslideIndexスライドクラスの長さに戻ってください。最初のスライドの前のスライドのために

は、すでにスライドの長配列よりも大きいslideIndexの値は、その後slideIndexに、この長さを割り当てるかどうかをチェックしなければならない

if (n < 1) {slideIndex = 1;} 
0

を動作するかどうかの条件があります。スライドインデックスの値が1より小さい場合は、同じ値を1に設定します。怒鳴るような

シンプルコード:

function plusDivs(n) { 
    slideIndex += n; 
    if(slideIndex >= x.length){slideIndex = x.length;}  
    if(slideIndex <=1){slideIndex=1} 
    showDivs(slideIndex += n); 
} 
関連する問題