Question

我在这里为javascript代码创建了一个小轮播

$.fn.calcslider = function(options){
    var settings = $.extend({
        // These are the defaults.
        autoslide: false,
        autoslideInterval : 1000,
        slideInterval : 1000
    }, options );
    return this.each(function(){
        var autoslide = '', scope = $(this),
        liLength = scope.find('.calc-list li').length,
        liWidth = scope.find('.calc-list li').outerWidth(true),
        totalWidth = liLength * liWidth,
        flag = true;
        scope.find('.calc-list ul').width(totalWidth);

        if(liLength == 1){
           scope.find('.prev-slide').addClass('hide');
           scope.find('.next-slide').addClass('hide');
        }

        var setAutoSider = function(check){
            if(settings.autoslide){
                if(check == 'clear'){
                    clearInterval(autoslide);
                }else{
                    autoslide = setInterval(function(){
                        scope.find('.next-slide').trigger('click');
                    }, settings.autoslideInterval);
                }   
            }               
        }

        setAutoSider('set');

        scope.find('.prev-slide').stop(true, true).click(function(){
            if(flag == true){
                flag = false;
                setAutoSider('clear');
                var lastLi = scope.find('.calc-list ul li:last-child').detach();
                scope.find('.calc-list ul').prepend(lastLi);
                scope.find('.calc-list ul').css('marginLeft' , '-'+ liWidth +'px');
                scope.find('.calc-list ul').animate({
                    marginLeft : '0'
                },settings.slideInterval, function(){
                    flag = true;
                    setAutoSider('set');
                });
            }
            return false;
        });
        scope.find('.next-slide').stop(true, true).click(function(){
            if(flag == true){
                flag = false;
                setAutoSider('clear');
                scope.find('.calc-list ul').animate({
                    marginLeft : '-'+ liWidth +'px'
                },settings.slideInterval, function(){
                    var firstLi = scope.find('.calc-list ul li:first-child').detach();
                    scope.find('.calc-list ul').append(firstLi);
                    scope.find('.calc-list ul').css('marginLeft' , 0);
                    flag = true;
                    setAutoSider('set');
                });
            }
            return false;
        });
    });
}

我曾经习惯

$('.mywrap').calcslider({
    autoslide : true,
    autoslideInterval : 5000,
    slideInterval : 500
});

现在可以正常工作了，我现在可以使用一个功能如果用户将鼠标悬停在此位置上，那么它将停止工作，并且将鼠标悬停在当前位置之外。

Answer 1

我可以看到您正在使用jQuery。您可以使用jQuery hover方法来实现。它接受2个回调函数，一个悬停时，另一个悬停时。

所以可能是这样的（在您的主要功能内）：

scope.hover( function() {
  // this one is fired when you point on the element
  setAutoSider( 'clear' );
}, function() {
  // this one is fired when you leave the element
  setAutoSider('set');
} );

Answer 2

嗨，我找到了这个问题的答案，我将答案发布给以后的用户。

$.fn.calcslider = function(options){
    var settings = $.extend({
        // These are the defaults.
        autoslide: false,
        autoslideInterval : 1000,
        slideInterval : 1000
    }, options );
    return this.each(function(){
        var autoslide = '', scope = $(this),
        liLength = scope.find('.calc-list li').length,
        liWidth = scope.find('.calc-list li').outerWidth(true),
        totalWidth = liLength * liWidth,
        flag = true;
        scope.find('.calc-list ul').width(totalWidth);

        if(liLength == 1){
           scope.find('.prev-slide').addClass('hide');
           scope.find('.next-slide').addClass('hide');
        }

        var setAutoSider = function(check){
            if(settings.autoslide){
                if(check == 'clear'){
                    clearInterval(autoslide);
                }else{
                    autoslide = setInterval(function(){
                        scope.find('.next-slide').trigger('click');
                    }, settings.autoslideInterval);
                }   
            }               
        }

        setAutoSider('set');
        scope.mouseenter(function(){
            setAutoSider('clear');    
        }).mouseleave(function(){
            setAutoSider('set');
        });

        scope.find('.prev-slide').stop(true, true).click(function(){
            if(flag == true){
                flag = false;
                //setAutoSider('clear');
                var lastLi = scope.find('.calc-list ul li:last-child').detach();
                scope.find('.calc-list ul').prepend(lastLi);
                scope.find('.calc-list ul').css('marginLeft' , '-'+ liWidth +'px');
                scope.find('.calc-list ul').animate({
                    marginLeft : '0'
                },settings.slideInterval, function(){
                    flag = true;
                    //setAutoSider('set');
                });
            }
            return false;
        });
        scope.find('.next-slide').stop(true, true).click(function(){
            if(flag == true){
                flag = false;
                //setAutoSider('clear');
                scope.find('.calc-list ul').animate({
                    marginLeft : '-'+ liWidth +'px'
                },settings.slideInterval, function(){
                    var firstLi = scope.find('.calc-list ul li:first-child').detach();
                    scope.find('.calc-list ul').append(firstLi);
                    scope.find('.calc-list ul').css('marginLeft' , 0);
                    flag = true;
                   // setAutoSider('set');
                });
            }
            return false;
        });
    });
}

轮播滑块创建自定义如何在用户将鼠标移到轮播滑块上时停止

2 个答案: