将上一个/下一个链接添加到幻灯片

Question

任何人都知道如何将此前/下一个链接添加到此轮播中？

http://jsfiddle.net/AndyMP/uA7NN/

    /* home slide show */

var slide_pos = 0;
var slide_len = 0;

$(document).ready(function() {

slide_len = $(".slideshow_item").size() - 1;

$(".slideshow_item:gt(0)").hide();

slide_int = setInterval(function() {

    slide_cur = $(".slideshow_item:eq(" + slide_pos + ")");
    slide_cur.fadeOut(2000);

    slide_pos = (slide_pos == slide_len ? 0 : (slide_pos + 1));

    slide_cur = $(".slideshow_item:eq(" + slide_pos + ")");
    slide_cur.fadeIn(2000);

}, 5000);

}); 

Answer 1

这只是一个快速的： http://jsfiddle.net/uA7NN/21/

Answer 2

逻辑非常简单：

/* home slide show */

var $slides = $('.slideshow_item');
var slide_pos = 0;
var slide_len = $('.slideshow_item').length;

$slides.filter(':gt(0)').hide();

slide_int = setInterval(function() {
    $('#next').click();
}, 2000);

$('#next').click(function() {
    $slides.eq(slide_pos % slide_len).fadeOut(2000);
    $slides.eq(++slide_pos % slide_len).fadeIn(2000);

    clearInterval(slide_int);
});

$('#prev').click(function() {
    $slides.eq(slide_pos % slide_len).fadeOut(2000);
    $slides.eq(--slide_pos % slide_len).fadeIn(2000);

    clearInterval(slide_int);
});

演示：http://jsfiddle.net/uA7NN/19/

Answer 3

这样的事情应该做的工作：）

/* home slide show */

var slide_pos = 0;
var slide_len = 0;

$(document).ready(function() {

    slide_len = $(".slideshow_item").size() - 1;

    $(".slideshow_item:gt(0)").hide();

    // Animate function
    function animate(prev) {

        slide_cur = $(".slideshow_item:eq(" + slide_pos + ")");
        slide_cur.fadeOut(2000);

        if (prev === false) {
            slide_pos = (slide_pos == slide_len ? 0 : (slide_pos + 1));
        } else {
            slide_pos = (slide_pos === 0 ? slide_len : (slide_pos - 1));
        }

        slide_cur = $(".slideshow_item:eq(" + slide_pos + ")");
        slide_cur.fadeIn(2000);

    }

    // Trigger the animate function
    function init() {
        slide_int = setInterval(function() { animate(false); }, 5000);
    }

    init();

    // Disable animation when slideshow is hovered
    $('#slideshow').hover(
        function() {
            clearInterval(slide_int);
        },
        function() {
            init();
        }
    );

    // Add prev/next actions
    $('.slideshow_prev').click(animate(true));
    $('.slideshow_next').click(animate(false));

});