Question

我正在使用jQuery创建一个功能内容滑块，我遇到了一些障碍，试图摆脱最后几个错误。它的灵感来自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/的滑块吗？

Answer 1

刚从其他帖子中发现了jQuery循环插件http://malsup.com/jquery/cycle/。

我用它重新制作了滑块，它根据需要进行了预制。好东西！

jQuery为每张幻灯片添加了带/动画的内容滑块

1 个答案: