jQuery 이미지 슬라이더 루프 만들기

Question

다음은 jquery 이미지 슬라이더의 코드입니다. 그것은 다음과 이전 버튼을 가지고 있으며, 마우스를 올렸을 때 멈추지 만 마지막 슬라이드로 가면 첫 번째 슬라이드를 반복해서 반복합니다. 어떤 도움을 주시면 감사하겠습니다. 나는 그것을 알아낼 수없는 내 뇌는 그것을 쳐다보고 아파요 .. 여기

$(document).ready(function(){ 
window.currentIndex = 0; 
function slide(index) { 

    index = index >= $('#slides img').length ? 0 : index; 


    $('#caption, #slide').fadeOut(500, function() { 
     $el = $('#slides img:eq('+index+')'); 
     $('#caption').text($el.attr('alt')); 
     $('#slide').attr('src', $el.attr('src')); 
     $('#caption, #slide').fadeIn(500); 
    }); 
} 
$("#featuredSlider").mouseenter(function(){ 
    if (timer) { 
     clearInterval(timer); 
    } 
}); 
$("#featuredSlider").mouseleave(function(){ 
    timer = setInterval(function(){ 
     slide(++window.currentIndex); 
    },3000); 
}).mouseleave(); 

//bind next/prev buttons 
$("#featuredPrev").on('click', function() { 
    slide(--window.currentIndex); 
}); 
$("#featuredNext").on('click', function() { 
    slide(++window.currentIndex); 
}); 
}); 

는 HTML입니다 :

<section id="featuredSlider"> 
<img id="slide" src="images/image1.png" alt="Hello"> 

<div id="slides"> 
<img src="images/image1.png" alt=""> 
<img src="images/image2.png" alt=""> 
<img src="images/image3.png" alt=""> 
</div> 
<div id="arrows"> 
<div id="featuredPrev"></div> 
<div id="featuredNext"></div> 
</div> 
</section> 

Answer 1

당신은 당신의 타이머에 window.currentIndex를 증가하고 있고 즉 무엇이 슬라이드 기능에 전달되는지. 5 개의 슬라이드가있는 경우 마지막 슬라이드를 지나갈 때까지 완벽하게 작동합니다. 함수가 실제로 실행되는 방법은 다음과 같습니다.

이제 6을 전달합니다. 6보다 크거나 같습니까? 예, 슬라이드 0으로 이동 ... window.currentIndex를 7로 증가시키고이를 전달하십시오. 6보다 크거나 같습니까? 예, 슬라이드 0으로 이동 ... window.currentIndex를 8로 증가시키고 그 값을 전달하십시오. 6보다 크거나 같습니까? 예, 당신은 currentIndex 변수를 재설정해야 .... 8 0 ... 증가 window.currentIndex을 밀어에서 그 통과

을 등을 가서 그 기능의 범위에 있기 때문에, 당신은에 액세스 할 수 있습니다 당신은 그것을 안으로 전달할 필요가 없으며 인덱스를 두 곳에서 추적 할 수 있습니다. 이 시도.

$(document).ready(function(){ 
currentIndex = 0; 
function slide() { 

    if (currentIndex >= $('#slides img').length) 
     currentIndex = 0 

    if (currentIndex < 0) 
     currentIndex = $('#slides img').length - 1 

    $('#caption, #slide').fadeOut(500, function() { 
     $el = $('#slides img:eq('+currentIndex+')'); 
     $('#caption').text($el.attr('alt')); 
     $('#slide').attr('src', $el.attr('src')); 
     $('#caption, #slide').fadeIn(500); 
    }); 
} 
$("#featuredSlider").mouseenter(function(){ 
    if (timer) { 
     clearInterval(timer); 
    } 
}); 
$("#featuredSlider").mouseleave(function(){ 
    timer = setInterval(function(){ 
     currentIndex++; 
     slide(); 
    },3000); 
}).mouseleave(); 

//bind next/prev buttons 
$("#featuredPrev").on('click', function() { 
    currentIndex--; 
    slide(); 
}); 
$("#featuredNext").on('click', function() { 
    currentIndex++; 
    slide(); 
}); 
});