Question

我试图在jquery中构建一个小滑块，即自动播放，还有导航按钮，可以更改当前幻灯片。到目前为止，我设法让Buttons工作，但由于我对JQuery不太自信，我不知道如何让定时更改起作用。

我尝试了一些我在stackoverflow上看到的建议，比如使用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();
});

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

1 个答案: