javascript - jQuery 特色内容 slider ，每张幻灯片都有动画

Question

我正在使用 jQuery 创建一个功能内容 slider ，但在尝试消除最后几个错误时遇到了一些障碍。它的灵感来自 http://kleientertainment.com/所以检查一下，你就会明白我要做什么。即使使用全新的代码，任何关于实现这种效果的建议都会有所帮助!

这个想法是一个简单的 div 交换，但每个幻灯片都有自定义动画，在加载时触发。它还必须在每次转换之间淡入黑色，无论是自动播放还是点击。

让我们来看看代码和错误:

$(document).ready(function () {

//START SLIDES HIDDEN
$('.slide').css({
    'position': 'absolute',
    'display': 'none'
});

//RUN FIRST SLIDE
runSlideShow(1);
animation1_swap();

//AUTOPLAY FUNCTION
function runSlideShow(slideNumber) {
    $('#slide' + slideNumber).fadeIn(1000).delay(10000).fadeOut(1000, function () {

        if (slideNumber == 4) {
            animation1_swap();
            runSlideShow(1);
        }
        if (slideNumber == 3) {
            animation4_swap();
            runSlideShow(4);
        }
        if (slideNumber == 2) {
            animation3_swap();
            runSlideShow(3);
        }
        if (slideNumber == 1) {
            animation2_swap();
            runSlideShow(2);
        }
    });

    //NAVIGATION BUTTONS
    $('#bullet1').click(function () {
        $('.slide:visible').stop(true, true).fadeOut(1000, function () {
            animation1_swap();
            runSlideShow(1);
        });
    });
    $('#bullet2').click(function () {
        $('.slide:visible').stop(true, true).fadeOut(1000, function () {
            animation2_swap();
            runSlideShow(2);
        });
    });
    $('#bullet3').click(function () {
        $('.slide:visible').stop(true, true).fadeOut(1000, function () {
            animation3_swap();
            runSlideShow(3);
        });
    });
    $('#bullet4').click(function () {
        $('.slide:visible').stop(true, true).fadeOut(1000, function () {
            animation4_swap();
            runSlideShow(4);
        });
    });
}
});

CSS 信息:.slide 设置尺寸，#slideX 是每个尺寸的单独背景图像。 #bulletX 是导航按钮。

此外，animationX_swap() 是特定于该幻灯片的动画。他们住在另一个文件中，会使这篇文章太长。

缺陷: 现在，自动播放功能很棒，你可以看一整天都不会打嗝。使用导航按钮时会出现问题，尤其是#bullet1。如果我单击 #bullet1，然后转到 2，然后返回到 1，自动播放似乎会加快，因为幻灯片在它应该出现之前淡出。我是一个完全的初学者，但我做到了这一点，任何人都可以帮助我清理它并从根本上重新想象 http://kleientertainment.com/的 slider ？

Answer 1

刚刚发现 jQuery 循环插件 http://malsup.com/jquery/cycle/来自另一篇文章。

我用它重新制作了我的 slider ，它完全按照需要进行预成型。好东西!