jQuery 슬라이드 쇼 코드가 완벽하게 작동하지 않습니다.

Question

슬라이드 쇼용 JS (jQuery) 스크립트를 작성했습니다. 매우 간단하고 다음/이전 버튼 만 있습니다. 지금 :

문제는 슬라이드 쇼가 매끄럽지 않다는 것입니다. 다음/이전 버튼을 누르면 빈 이미지도 표시됩니다. 그래서,이 세 가지 이미지를 얻고 경우 이미지 # 1에서 이동을 시작,이 같은 상황이 발생합니다

1 # -> # 2 -> 3 번 -> 빈

동안 대신 빈 # 1 이미지로 돌아 가야하지만 그렇지 않습니다.

: 여기

$(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 코드입니다 :

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

는 JS 코드입니다 (대신 IMG의 내가 넣어 가지고 P) 여기

는 jsFiddle 코드입니다

<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

다음 NEXT 블록에서 :

전 BLOCK에서

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

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

업데이트의 경우 블록이 코드. 그리고 이전 버튼에서 다음 버튼과 다음 메소드에 대해 이전 메서드를 호출하는 오류가 한 번 보았습니다. 그것이 당신의 실수인지 아니면 다른 것인지는 알 수 없습니다.

최종 코드 : http://jsfiddle.net/5HHew/6/

이 다음에 코드를해야한다 :

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

작업이 예제를 가지고 및 이전

$("#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!