将下一个/上一个按钮添加到jQuery幻灯片放映

Question

我创建了一个jQuery幻灯片放映，我需要知道如何向它添加下一个和上一个按钮。我将不胜感激任何帮助

$(document).ready(function(){
var nextSlide = $("#slides img:first-child");
var nextCaption;
var nextSlideSource;
var timer;
$("#featuredSlider").mouseenter(function(){
        if (timer) { clearInterval(timer) }

});
$("#featuredSlider").mouseleave(function(){
timer = setInterval(
    function(){
        $("#caption").fadeOut(1000);
        $("#slide").fadeOut(1000,
            function(){
                if (nextSlide.next().length == 0) {
                    nextSlide = $("#slides img:first-child");
                }
                else{
                    nextSlide = nextSlide.next();
                }
                nextSlideSource = nextSlide.attr("src");
                nextCaption = nextSlide.attr("alt");
                $("#slide").attr("src", nextSlideSource).fadeIn(1000);
                $("#caption").text(nextCaption).fadeIn(1000);

            })
    },3000);
})
.mouseleave();
});

Answer 1

脱离我的头顶：

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

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