javascript - 当控制导航设置为悬停/鼠标悬停时，无限循环滑块会跳转幻灯片

Question

我有一个无限循环滑块，可以在叠加层下显示下一张和上一张幻灯片。滑块控件在设置为单击时起作用，但是当切换到悬停或鼠标悬停时，如果光标移动得太快，幻灯片就会失去顺序。

这是带有悬停控制导航的滑块。 例子

这是javascript：

    jQuery(window).load(function () {

var $ = jQuery;

tcarousel = {

    selectors: {
        container: '#hero_slider',
        viewPort: '#hero_slider .flex-viewport',
        slideUl: '#hero_slider .slides',
        list: '#hero_slider .slides li',
        activeSlide: '.slides .active',
        pagingNav: '.flex-control-paging',
        prevNav: '.flex-prev',
        nextNav: '.flex-next'

    },


    init: function (options) {

        this.item_width = $(this.selectors.list).outerWidth();
        this.slideLength = $(this.selectors.list).length;

        this.setOrderIndex();
        this.createPagingNav();
        this.reposition();
        this.createControlNav();
    },

    setOrderIndex: function () {
        $(this.selectors.list).each(function (i) {
            $(this).attr('data-order', i + 1);
        });
    },

    reposition: function () {
        //should be a better way to do this
        $(this.selectors.list + ':first').before($(this.selectors.list + ':last'));
        $(this.selectors.list + ':first').before($(this.selectors.list + ':last'));
    },

    createPagingNav: function () {

        var $ctrlNav = $('<ol class="flex-control-nav flex-control-paging"></ol>')
        var str = [];

        $(this.selectors.list).each(function (i) {
            var $el = $(this);
            var title = $el.data().label;
            var isActive = $el.hasClass('active');
            var markup = '<li><a class="nav_label">' + title + '</a></li>';

            if (isActive) {
                markup = '<li><a class="nav_label flex-active">' + title + '</a></li>'
            }
            str.push(markup);
        });

        $ctrlNav.html(str.join(''));
        $(this.selectors.container).append($ctrlNav);


        $ctrlNav.find('.nav_label').mouseover($.proxy(this.navTo, this));
        $ctrlNav.find('.nav_label').click(alert('clicked item' + this));

    },

    navTo: function (e) {

        var $el = $(e.target);

        if ($el.hasClass('flex-active')) {
            return;
        }

        var index = $el.parent().index() + 1;
        var $slidesUl = $(this.selectors.slideUl);

        this.setPageNavToActiveByIndex(index);

        var $currentSlide = $slidesUl.find('.active');
        var currentIndex = $currentSlide.data().order;

        $currentSlide.removeClass('active');

        $slidesUl.find('li[data-order=' + index + ']').addClass('active');

        var totalPage = ($slidesUl.find('li[data-order=' + index + ']').index() + 1) - ($slidesUl.find('li[data-order=' + currentIndex + ']').index() + 1);

        this.slideByPage(totalPage);

        e.preventDefault();

    },

    createControlNav: function () {

        var selectors = this.selectors;
        var $dirNav = $('<ul class="flex-direction-nav"><li><a class="flex-prev" href="#">Previous</a></li><li><a class="flex-next" href="#">Next</a></li></ul>');
        $(this.selectors.container).append($dirNav);

        $(selectors.nextNav, selectors.container).click($.proxy(this.goToNext, this));
        $(selectors.prevNav, selectors.container).click($.proxy(this.goToPrev, this));


    },

    setPageNavToActiveByIndex: function (index) {

        var $pagingNav = $(this.selectors.pagingNav);

        $pagingNav
                .find('.flex-active')
                .removeClass('flex-active');

        $pagingNav
            .find('li')
            .eq(index - 1)
            .find('a')
            .addClass('flex-active');
    },

    goToNext: function (e) {

        $(this.selectors.activeSlide)
            .removeClass('active')
            .next()
            .addClass('active');

        var index = $(this.selectors.activeSlide).data('order');

        this.slide('right');
        this.setPageNavToActiveByIndex(index);

        e.preventDefault();
    },

    goToPrev: function (e) {

        $(this.selectors.activeSlide)
            .removeClass('active')
            .prev()
            .addClass('active');

        var index = $(this.selectors.activeSlide).data('order');

        this.setPageNavToActiveByIndex(index);
        this.slide('left');

        e.preventDefault();
    },

    slide: function (dir) {

        var me = this;
        var $viewport = $(this.selectors.viewPort);

        if (dir == 'left') {
            left_indent = parseInt($viewport.css('left')) + this.item_width;
        } else {
            left_indent = parseInt($viewport.css('left')) - this.item_width;
        }

        $viewport.not(':animated').animate({ 'left': left_indent }, 500, function () {

            if (dir == 'left') {
                $(me.selectors.list + ':first').before($(me.selectors.list + ':last'));
            } else {
                $(me.selectors.list + ':last').after($(me.selectors.list + ':first'));
            }

            $viewport.css({ 'left': me.item_width * -2 });

        });

    },

    slideByPage: function (num) {

        var me = this;
        var dir = (num < 0) ? 'left' : 'right';
        var num = Math.abs(num);
        var loc = (num * this.item_width) * -1;
        var $viewport = $(this.selectors.viewPort);

        if (dir == 'left') {

            var leftLoc = parseInt($viewport.css('left'));

            if (num == 1) {

                left_indent = parseInt($viewport.css('left')) + this.item_width;

            } else {
                $(this.selectors.list + ':first').before($(this.selectors.list + ':last'));
                $viewport.css({ 'left': (leftLoc < (this.item_width * -2)) ? leftLoc - this.item_width : (this.item_width * -3) });
                left_indent = parseInt($viewport.css('left')) + this.item_width * num;

            }
            loc = leftLoc;

        } else {
            if (num == 1) {
                left_indent = parseInt($viewport.css('left')) - this.item_width;
                loc = this.item_width * -2;
            }
            else {


                $(this.selectors.list + ':last').after($(this.selectors.list + ':first'));
                $viewport.css({ 'left': this.item_width * -1 });
                left_indent = parseInt($viewport.css('left')) - this.item_width * num;
            }
        }

        $viewport.not(':animated').animate({ 'left': left_indent }, 500, function () {

            if (dir == 'left') {
                $(me.selectors.list + ':first').before($(me.selectors.list + ':last'));
            } else {
                $(me.selectors.list + ':last').after($(me.selectors.list + ':first'));
            }
            $viewport.css({ 'left': loc });
        });
    }
};
tcarousel.init();

});

我能做些什么让它不失去它的位置吗？