내 갤러리에서 setInterval에 대해 글 머리 기호를 클릭하는 방법은 무엇입니까?

Question

나는이 작업을 할 수 없다. 내 갤러리에서 "글 머리 기호"(setInterval이 이미 실행 중일 때)를 클릭하면 버그가있다. 예 :

내가 갤러리를 실행할 때 : 편집 : 글 머리 기호 클릭이 제대로 작동하지 않았다

var current = 0; 
/* click on BULLETS : i think the problem is in this function */ 
pts.live('click', function() { 
     var index = $(this).index(); 

     clearInterval(timer); 
     current = index-1; 
     timer = setInterval(function() { showImage(current) },2000); 

     return false; 
    }); 

---

편집 : 감사 Gavriel, 그것은 참으로 addClass 더 나은 것 같다! 하지만 난 총알에 대한 클릭을 해결할 수 없습니다 : 내가 총알을 클릭하면, 나는 "간격"을 멈추고 싶었고 내가 클릭 한 이미지로 직접갑니다. 가능한가? 내가 그것을 (아래 참조하십시오), "현재"이미지 그대로 유지, 그것은 1-2 초 동안 머물러 있고, 아무 일도 일어나지 않았던 것처럼 다시 시작합니다 ... 당신은 어떤 생각을 가지고 있습니까?

/* click on BULLETS : */ 
pts.live('click', function() { 
     var index = $(this).index(); 

     clearInterval(timer); 

     li.removeClass('next'); 
     li.eq(index).addClass('next'); 
     showImage(); 

     timer = setInterval(function() { nextImage() }, 1000); 

     return false; 

    }); 

//TIMER 
var timer = setInterval(function() { nextImage() }, 1000); 
li.eq(0).addClass('next'); 

function nextImage(){ 
    var index = $('#contG').find('li:.next').index(); 
    $('#contG').find('li:.next').removeClass('next').addClass('current'); 

    /*design bullet */ 
    var pts_li = $("#points").find('ul').find('li'); 
     pts_li.removeClass('activ'); 

    /* limit */ 
    var total = li.length; //3 

    if (index+1>total-1) { 
     index = 0; 
    } else { 
     index = index+1; 
    } 

    li.eq(index).removeClass('current').addClass('next'); 
    pts_li.eq(index).addClass('activ'); 

    showImage(); 
} 


/* SHOWIMAGE */ 
function showImage(){ 
    //clearInterval(timer); 
    $('#contG').find('li:.next').fadeIn("slow");//FADEIN 
    $('#contG').find('li:.current').fadeOut("slow");//FADEOUT 
} 

---

EDIT N ° 2 : 최종 전투

내가 마지막으로이 문제를 해결하는 방법을 ... 감사합니다 :-) 방화범 발견 확인 :

: 여기

코드입니다

pts.live('click', function() { 
     var index = $(this).index(); 

     clearInterval(timer); 

     $('#contG').find('li:.next').removeClass('next').addClass('current'); 

     li.eq(index).removeClass('current').addClass('next'); 

     showImage(); 
     timer = setInterval(function() { nextImage() }, 2500); 

     return false; 
    }); 

고마워요.

Answer 1

r 문제는 전역 변수의 사용법입니다. 클로저를 사용하여 시작

(function(c){ 
    timer = setInterval(function() { showImage(c) },2000); 
})(current); 

당신이 함수에 전류를 통과 할 것이다, 2 초 후에 당신이있을 수 있습니다 무엇이든 showImage 가치와 current'v하지 값을 전달합니다 클릭의 순간에이 방법 2 초 후.

그러나 당신은 ... 나는 더 좋은 방법이 이런 식으로 뭔가있을 거라고 생각하고 싶은 것을 이해하려고 노력 :

대신 현재의 값으로 "계산"요소에 페이드를하는

, I $ (this) .addClass ("current") 또는 그와 비슷한 것을 클래스를 사용하여 "현재"요소에 "서명"하려고합니다. 그리고 fade에서는 $ ('# contG')를 사용할 것입니다. : "current") .fadeOut ("slow", function() {$ (this) .removeClass ("current")});

Answer 2

어디에서 슬라이딩하고 있습니까? 다음 이미지를 프레임으로 옮기는 코드는 어디에 있습니까? 전체 코드를 공유 할 수 있습니까?

fadeOut

pts.live('click', function() { 
     clearInterval(timer); 
     li.removeClass('next'); 
     $(this).addClass('next'); 
     showImage(); 

     timer = setInterval(function() { nextImage() }, 1000); 

     return false; 

    }); 

를 완료하는 데 시간이 걸립니다, 차라리 총알의 인덱스를 찾아 다시 인덱스에서 선택보다 $(this)를 사용하는 것이 좋습니다 것입니다, 또한

(또는? jsfiddle), 그러나 fadeOut가 비동기, fadeOut and fadeIn는 simulatenously 실행할 것이므로, 나는 그것을 좋아할 것이라고 권하고 싶다. 는

function showImage(){ 
     $('#contG').find('li:.current').fadeOut("slow",function(){ 
      $('#contG').find('li:.next').fadeIn("slow"); 
     } 
    } 

추신 (이 문제에 대한 이유가 될 수 있습니다)
사용하지 마십시오 live, 사용되지 않습니다. 대신 on을 사용하십시오.