jQuery код слайд-шоу не работает отлично

Question

Я написал сценарий JS (jQuery) для слайд-шоу. Это очень просто и имеет только следующую/предыдущую кнопку. Сейчас:

ПРОБЛЕМА заключается в том, что слайд-шоу не является бесшовным. Когда я нажимаю следующую/предыдущую кнопку, он также показывает пустые изображения. Так что, если у меня есть три изображений и начать навигацию с изображением # 1, что-то подобное происходит:

1 # -> # 2 -> # 3 -> пустого

, а вместо пустое он должен вернуться к изображениям №1, но это не так. (Вместо IMG я поставил р)

Вот jsFiddle Код:

http://jsfiddle.net/mostafatalebi/SG3Rq/

Вот код JS:

$(document).ready(function() {           

    var x = $('.slide_top').children('p'); 

    x.hide(); 

    var i = 0; 

    x.eq(i).show(); 

    $("#slide_next").click(function(event){ 

      event.stopPropagation();  
      event.preventDefault(); 
      x.eq(i).hide();  
      x.eq(i).next().show(); 
      i = i + 1; 
      if(i === x.length) 
      { 
       i = 0; 
      } 

    });   
    $("#slide_prev").click(function(event){        
      event.preventDefault(); 
      event.stopPropagation(); 
      x.eq(i).hide(); 

      x.eq(i).prev().show();  
      i = i - 1; 
      if(i == x.length) 
      { 
       i = 0; 
      } 

    }); 
}); 

Вот HTML код:

<div class='slide_top'> 
    <p>This is the first Paragraph</p> 
    <p>This is the second Paragraph</p> 
    <p>This is the third Paragraph</p> 
</div> 
<ul id='slide_top_click'> 
    <li><a id='slide_prev' href='#' class='slide-next-icon'>Next</a></li> 
    <li><a id='slide_next' href='#' class='slide-prev-icon'>Previous</a></li> 
</ul> 

Answer 1

СЛЕДУЮЩИЙ блок:

if(i == x.length){ 
     i = 0; 
     x.eq(i).show(); 
    } 

В ПРЕД BLOCK

if(i === 0){ 
     i=x.length-1; 
     x.eq(i).show(); 
}else{ 
    i = i - 1; 
} 

Обновление этого кода в блоке, если. И я увидел одну ошибку, которую вы называете предыдущим методом на следующей кнопке и следующем методе на кнопке prev. Не знаю, это ваша ошибка или что-то еще.

Final Код:

$(document).ready(function(){            
     var x = $('.slide_top').children('p'); 
     x.hide(); 
     var i = 0; 
     x.eq(i).show(); 
     $("#slide_next").click(function(event){ 
       event.stopPropagation();  
       event.preventDefault(); 
       x.eq(i).hide();  
       x.eq(i).next().show(); 
       i = i + 1; 
       if(i === x.length){ 
        i = 0; 
        x.eq(i).show(); 
       } 
     });   
     $("#slide_prev").click(function(event){        
       event.preventDefault(); 
       event.stopPropagation(); 
       alert(i); 
       x.eq(i).hide(); 
       x.eq(i).prev().show();  
       if(i === 0){ 
        i=x.length-1; 
        x.eq(i).show(); 
       }else{ 
        i = i - 1; 
       } 
     }); 
    }); 

Answer 2

Доброе утро

Я получил этот пример работает poerfectly

Просто проверить это для кода: http://jsfiddle.net/5HHew/6/

Это должно быть код для следующего и пред

$("#slide_next").click(function(){ 

event.stopPropagation();  
      event.preventDefault(); 
      x.eq(i).hide(); 
      i = i + 1;  


      if(i === x.length) 
      { 
       i = 0; 

      } 

    x.eq(i).show(); 
    });   
    $("#slide_prev").click(function(event){        
      event.preventDefault(); 
      event.stopPropagation(); 
      x.eq(i).hide(); 
      i = i - 1;  


      if(i === -1) 
      { 
       i = x.length - 1; 

      }    
    x.eq(i).show(); 

    });  }); 

также, вы перекрыли свои мероприятия около

Goodluck!