Простой JavaScript слайдер не работает правильно

Я пытаюсь создать простой слайдер содержимого JavaScript, принцип заключается в том, что я складываю все div сверху друг на друга, и когда я нажимаю следующий или предыдущий, один из них становится видимым, а остальные скрыты , К сожалению, я смог получить следующую кнопку, едва работающую, она должна зацикливаться, но когда она доходит до последнего div, она застревает, а предыдущая кнопка не работает вообще.Простой JavaScript слайдер не работает правильно

Эти части я подозреваю, являются причиной проблемы

// Next & Previous 
    nrSlide=3; 
    function Load(){ 
    nrShown = 0; 
    vect = new Array(nrSlide + 1); 
    vect[0] = document.getElementById("slide1"); 
    vect[0].style.visibility = "visible"; 
    for (var i = 1; i < nrSlide; i++) 
    { 
     vect[i] = document.getElementById("slide" + (i+1)); 
    } 
    } 
    function next(){ 
    nrShown++; 
    if(nrShown == nrSlide) 
     nrSlide=0; 
     Effect(); 
    } 
    function prev(){ 
     nrShown--; 
     if(nrShown == -1) 
     nrSlide= nrSlide -1; 
     Effect(); 
     } 
    // Effect 
    function Effect(){ 
    for (var i=0; i < nrSlide; i++){ 
     vect[i].style.opacity = "0"; 
     vect[i].style.visibility = "hidden"; 
    } 
    vect[nrShown].style.opacity = "1"; 
    vect[nrShown].style.visibility = "visible"; 
    } 


    <div class="prev"> 
    <input type="button" value="previous" onClick="prev();" 
    </div> 
    <div class="next"> 
    <input type="button" value="next" onClick="next();" 
    </div>

Это полный сценарий, за исключением CSS, так как я уверен, что проблема не в этом. Также, пожалуйста, игнорировать другие JavaScript (fence1-2-3) Я знаю, что это ужасно, и все, но моя проблема сейчас находится в следующий и предыдущий

<?DOCTYPE html> 
<html> 
<head> 
    <title> Module </title> 
    <link rel="stylesheet" href="st2.css"> 
    <script> 
    // Fence 1 
    var fence1 = new Array(5); 
    fence1[0] = new Image; 
    fence1[0].src = "img/fence1/fence02.jpg"; 
    fence1[1] = new Image; 
    fence1[1].src = "img/fence1/fence03.jpg"; 
    fence1[2] = new Image; 
    fence1[2].src = "img/fence1/fence04.jpg"; 
    fence1[3] = new Image; 
    fence1[3].src = "img/fence1/fence05.jpg"; 
    fence1[4] = new Image; 
    fence1[4].src = "img/fence1/fence10.jpg"; 
    fence1[5] = new Image; 
    fence1[5].src = "img/fence1/fence12.jpg"; 
    function fence10(){ 
    document.slide.src = fence1[0].src; 
    } 
    function fence11(){ 
    document.slide.src = fence1[1].src; 
    } 
    function fence12(){ 
    document.slide.src = fence1[2].src; 
    } 
    function fence13(){ 
    document.slide.src = fence1[3].src; 
    } 
    function fence14(){ 
    document.slide.src = fence1[4].src; 
    } 
    function fence15(){ 
    document.slide.src = fence1[5].src; 
    } 
    // Fence 2 
    var fence2 = new Array(5); 
    fence2[0] = new Image; 
    fence2[0].src = "img/fence2/fence02.jpg"; 
    fence2[1] = new Image; 
    fence2[1].src = "img/fence2/fence03.jpg"; 
    fence2[2] = new Image; 
    fence2[2].src = "img/fence2/fence04.jpg"; 
    fence2[3] = new Image; 
    fence2[3].src = "img/fence2/fence05.jpg"; 
    fence2[4] = new Image; 
    fence2[4].src = "img/fence2/fence10.jpg"; 
    fence2[5] = new Image; 
    fence2[5].src = "img/fence2/fence12.jpg"; 
    function fence20(){ 
    document.slide.src = fence2[0].src; 
    } 
    function fence21(){ 
    document.slide.src = fence2[1].src; 
    } 
    function fence22(){ 
    document.slide.src = fence2[2].src; 
    } 
    function fence23(){ 
    document.slide.src = fence2[3].src; 
    } 
    function fence24(){ 
    document.slide.src = fence2[4].src; 
    } 
    function fence25(){ 
    document.slide.src = fence2[5].src; 
    } 
    // Fence 3 
    var fence3 = new Array(5); 
    fence3[0] = new Image; 
    fence3[0].src = "img/fence3/fence02.jpg"; 
    fence3[1] = new Image; 
    fence3[1].src = "img/fence3/fence03.jpg"; 
    fence3[2] = new Image; 
    fence3[2].src = "img/fence3/fence04.jpg"; 
    fence3[3] = new Image; 
    fence3[3].src = "img/fence3/fence05.jpg"; 
    fence3[4] = new Image; 
    fence3[4].src = "img/fence3/fence10.jpg"; 
    fence3[5] = new Image; 
    fence3[5].src = "img/fence3/fence12.jpg"; 
    function fence30(){ 
    document.slide.src = fence3[0].src; 
    } 
    function fence31(){ 
    document.slide.src = fence3[1].src; 
    } 
    function fence32(){ 
    document.slide.src = fence3[2].src; 
    } 
    function fence33(){ 
    document.slide.src = fence3[3].src; 
    } 
    function fence34(){ 
    document.slide.src = fence3[4].src; 
    } 
    function fence35(){ 
    document.slide.src = fence3[5].src; 
    } 
    // Next & Previous 
    nrSlide=3; 
    function Load(){ 
    nrShown = 0; 
    vect = new Array(nrSlide + 1); 
    vect[0] = document.getElementById("slide1"); 
    vect[0].style.visibility = "visible"; 
    for (var i = 1; i < nrSlide; i++) 
    { 
     vect[i] = document.getElementById("slide" + (i+1)); 
    } 
    } 
    function next(){ 
    nrShown++; 
    if(nrShown == nrSlide) 
     nrSlide=0; 
     Effect(); 
    } 
    function prev(){ 
     nrShown--; 
     if(nrShown == -1) 
     nrSlide= nrSlide -1; 
     Effect(); 
     } 
    // Effect 
    function Effect(){ 
    for (var i=0; i < nrSlide; i++){ 
     vect[i].style.opacity = "0"; 
     vect[i].style.visibility = "hidden"; 
    } 
    vect[nrShown].style.opacity = "1"; 
    vect[nrShown].style.visibility = "visible"; 
    } 


    </script> 
</head> 
<body onload="Load()"> 
    <div class="container"> 
    <div class="slider"> 
     <!-- First slide --> 
     <div class="slides" id="slide1"> 
     <div class="menu-i"> 
      <div class="info"> 
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices pellentesque facilisis. In semper tellus mollis nisl</p> 
      </div> 
     </div> 
     <div class="menu"> 
      <div class="opt"> 
      <ul> 
       <li> 
       <input type="button" class="btn f1" onClick="fence10();"> 
       </li> 
       <li> 
       <input type="button" class="btn f2" onClick="fence11();"> 
       </li> 
       <li> 
       <input type="button" class="btn f3" onClick="fence12();"> 
       </li> 
       <li> 
       <input type="button" class="btn f4" onClick="fence13();"> 
       </li> 
       <li> 
       <input type="button" class="btn f5" onClick="fence14();"> 
       </li> 
       <li> 
       <input type="button" class="btn f6" onClick="fence15();"> 
       </li> 
      </div> 
     </div> 
     <img src="img/fence1/fence02.jpg" name="slide"> 
     </div> 
     <!-- Second slide --> 
     <div class="slides" id="slide2"> 
     <div class="menu-i"> 
      <div class="info"> 
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices pellentesque facilisis. In semper tellus mollis nisl</p> 
      </div> 
     </div> 
     <div class="menu"> 
      <div class="opt"> 
      <ul> 
       <li> 
       <input type="button" class="btn f1" onClick="fence20();"> 
       </li> 
       <li> 
       <input type="button" class="btn f2" onClick="fence21();"> 
       </li> 
       <li> 
       <input type="button" class="btn f3" onClick="fence22();"> 
       </li> 
       <li> 
       <input type="button" class="btn f4" onClick="fence23();"> 
       </li> 
       <li> 
       <input type="button" class="btn f5" onClick="fence24();"> 
       </li> 
       <li> 
       <input type="button" class="btn f6" onClick="fence25();"> 
       </li> 
      </div> 
      </div> 
      <img src="img/fence2/fence02.jpg" name="slide"> 
     </div> 
     <!-- Third slider --> 
     <div class="slides" id="slide3"> 
      <div class="menu-i"> 
      <div class="info"> 
       <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices pellentesque facilisis. In semper tellus mollis nisl</p> 
      </div> 
      </div> 
      <div class="menu"> 
      <div class="opt"> 
       <ul> 
       <li> 
        <input type="button" class="btn f1" onClick="fence30();"> 
       </li> 
       <li> 
        <input type="button" class="btn f2" onClick="fence31();"> 
       </li> 
       <li> 
        <input type="button" class="btn f3" onClick="fence32();"> 
       </li> 
       <li> 
        <input type="button" class="btn f4" onClick="fence33();"> 
       </li> 
       <li> 
        <input type="button" class="btn f5" onClick="fence34();"> 
       </li> 
       <li> 
        <input type="button" class="btn f6" onClick="fence35();"> 
       </li> 
       </div> 
      </div> 
      <img src="img/fence1/fence04.jpg" name="slide"> 
      </div> 
     </div> 
    </div> 

    <!-- Next & previous --> 
    <div class="ctrl"> 
     <div class="prev"> 
     <input type="button" value="previous" onClick="prev();" 
     </div> 
     <div class="next"> 
     <input type="button" value="next" onClick="next();" 
     </div> 
    </div> 
    </div> 
</div> 
</body> 
</html>

источник

2015-01-22 Anonymous

Без чтения через весь код, этот бит выглядит немного странно: если (nrShown == -1) nrSlide = nrSlide -1; Effect(); } – Jonathan

Я действительно не думаю, что ваш комментарий полезен @ Jonathan, я знаю, что это странно, большая часть кода. Если вы не заметили, что я совершенно новый. –

Извините, что я понял, что комментарий затруднил объяснение, но похоже, что вы можете изменить nrSlide (я предполагаю, что у вас есть слайды?) Вместо nrShown (я предполагаю, что текущий слайд отображается). Проверьте ответ, который я разместил, и посмотрим, имеет ли смысл. – Jonathan

Я выхожу на конечности, потому что я не читал полностью через ваш код. Поскольку это немного долго комментарий, попробуйте следующее:

function next(){ 
    nrShown++; 
    if(nrShown == nrSlide) { 
    nrShown=0; // Instead of nrSlide 
    } 
    Effect(); 
} 
function prev(){ 
    nrShown--; 
    if(nrShown == -1) { 
    nrShown = nrSlide -1; // Instead of nrSlide 
    } 
    Effect(); 
}

источник

2015-01-22 04:05:44 Jonathan

Спасибо, человек! Он работает, вы потрясающий –

Нет проблем. Я должен сказать, для кого-то, кто совершенно новый, у вас все хорошо! Не сдавайтесь, и вы станете профессионалом, прежде чем вы это узнаете. :) – Jonathan

Простой JavaScript слайдер не работает правильно

ответ

Смежные вопросы