带有自动播放和导航功能的 Jquery 滑块

Question

我正在尝试在 jquery 中构建一个小滑块，它可以自动播放并且还具有允许更改当前幻灯片的导航按钮。到目前为止，我设法让按钮工作，但由于我对 JQuery 不是很有信心，我不知道如何让定时更改工作。

我尝试了一些我在 * 上看到的建议，比如使用 setInterval 和 setTimeout，但我无法让它正常工作。我的主要问题是我想确保动画在每次单击更改幻灯片之前完成，并且单击会重置自动播放的计时器。

我希望这里有人可以帮助我解决我的问题。

编辑：我有一个计时器功能可以工作，现在我的问题是，如果在动画运行时单击按钮，可能会导致同时显示两张幻灯片。在动画播放完毕之前，如何确保点击被排队？

这是一个小提琴：http://jsfiddle.net/9sgfd22r/10/

这是我的功能：

 (function($){
        $.fn.Slider = function(interval) {

            var slides = $sliderdiv.children('.slides');
            var amount = slides.length;
            var i = 0;
            var animation = 0;
            var clicked = 0;

            function run() {
                animation = 1;
                $('.slides:visible').each(function() {
                    active = this.id.replace('slide', '');
                    active = active - 1;
                    console.log(active);
                });

                $(slides[active]).fadeOut(1000, function(){
                    i = clicked - 1;

                    $("img", $(slides[i])).each(function(){
                        $(this).attr('src', $(this).attr('data-src'));
                    });

                    $(slides[i]).fadeIn(1000);
                    clicked = 0;
                    animation = 0;
                    intervaltint = setInterval(autoplay,3000);
                });
            }



            function autoplay(){
                console.log('running');
                animation = 1;
                $('.slides:visible').each(function() {
                    active2 = this.id.replace('slide', '');
                    active2 = active2 - 1;
                    console.log(active2);
                });

                $(slides[active2]).fadeOut(1000, function(){
                    active2++;
                    if (active2 >= amount) active2 = 0;

                    $("img", $(slides[active2])).each(function(){
                        $(this).attr('src', $(this).attr('data-src'));
                    });

                    $(slides[active2]).fadeIn(1000);
                    animation = 0;
                });
            }

            intervaltint = setInterval(autoplay,3000);

            var $slidernav = $('.slidernav');
            $('.slidernav').click(function() {

                clearInterval(intervaltint);

                activeslide = this.id.replace('slidernav', '');

                if (animation == 0) {
                    clicked = activeslide;
                    run();
                }
                else {
                    console.log('not now');

                    clicked = activeslide;
                    run();
                }
            });

        };
    })(jQuery);

Answer 1

这个fiddle怎么样

我添加的示例代码是

function next(){
    if (animation == 0) {
        $('.slides').each(function(index,value) {
            if($(this).is(':visible')){
                if(($('.slides').length-1) == index){
                    clicked = 1;
                }
                else{
                    if(clicked == 0)
                        clicked++;
                    clicked++;
                }
            }
        });
        run();
    }
}

$('#next').click(function(){
    next();
});