Javascript jQuery特色内容滑块，每个幻灯片都有动画

我正在使用jQuery创建一个功能内容滑块，我遇到了一些障碍，试图消除最后几个bug。这本书的灵感来源于，所以看看吧，你就会明白我的目的是什么。任何关于实现这种效果的建议，即使是使用全新的代码，都会很有帮助

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

让我们来看看代码和bug：

$(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信息：。幻灯片设置尺寸，#slideX是每个尺寸的单独背景图像#bulletX是导航按钮

另外，animationX_swap（）是特定于该幻灯片的动画。他们生活在另一个文件中，这篇文章会写得太长

缺陷：

---

现在，自动播放功能很好，你可以看一整天，而不会看到打嗝。当使用导航按钮时，麻烦就来了，尤其是“bullet1”。如果我单击#bullet1，然后转到2，然后再返回1，自动播放速度似乎会加快，因为幻灯片会在预期时间之前消失。我是一个完全的初学者，但我已经做到了这一点，有人能帮我清理一下，并从本质上重新想象一下滑动条吗？

刚刚从另一篇文章中发现了jQuery cycle插件

---

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

刚刚从另一篇文章中发现jQuery cycle插件

---

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

我猜我需要将延迟时间设置为一个变量，并在单击按钮时使用setTimeOut（）重置它。有谁熟悉这样做吗？我猜我需要将延迟时间设置为一个变量，并在单击按钮时使用setTimeOut（）重置它。有人熟悉这个吗？