Javascript/Jquery Slider에 버튼을 추가하려면 어떻게해야합니까?

Question

그래서 javascript/jquery 이미지 슬라이더가 있습니다. 각 슬라이드는 <div> 요소이며 div 컨테이너의 하위 요소입니다. 5 초마다 마지막 슬라이드가 위로 올라오고 새 이미지가 사라집니다. 간단한 것들. 내 코드는 다음과 같습니다.

window.onload = function start() { 
    slide(); 
} 

function slide() { 
    var num = 0; 
    window.setInterval(function() { 
     $("#container div:eq(" + num + ")").slideUp(450); 
     num = (num + 1) % 4; 
     $("#container div:eq(" + num + ")").fadeIn(450); 

    }, 5000); 

그럼 다음 슬라이드와 마지막 슬라이드로 이동하는 버튼을 추가하려면 어떻게해야합니까?

Answer 1

다음 :

$("#next").click(function() { 
    $("#container div:eq(" + num + ")").slideUp(450); 
    num = (num + 1) % 4; 
    $("#container div:eq(" + num + ")").fadeIn(450); 
}); 

마지막 :

$("#last").click(function() { 
    $("#container div:eq(" + num + ")").slideUp(450); 
    num = 4; 
    $("#container div:eq(" + num + ")").fadeIn(450); 
}); 

Answer 2

HTML :

<a id="next" href="#">next</a> 
<a id="last" href="#">last</a> 

자바 스크립트 :

,

$(document).ready(function() { 
    var cur = 0; 

    var slide = function (n) { 
    $("#container div:eq(" + cur + ")").slideUp(450); 
    cur = n; 
    $("#container div:eq(" + cur + ")").fadeIn(450); 
) 

    setInterval(function() { slide((cur + 1) % 4); }, 5000); 

    $('#next').click(function() { slide((cur + 1) % 4); }); 
    $('#last').click(function() { slide(3); }); 
});