Come mettere in pausa al passaggio del mouse a portata di cursore

Question

http: // cssglobe. com / post / 4004 / facile-slider-15-il-facile-jquery-plugin-per-scorrevole

Sto usando facile scorrimento per la bandiera e ho chiamato qui di seguito script per il gioco

    $("#slider").easySlider({
            auto: true,
            continuous: true,
            nextId: "slider1next",
            prevId: "slider1prev",
            hoverpause: true            });
    });

E 'scorrevole in modo corretto. Ma voglio mettere in pausa scorrevole, mentre hover sulla diapositiva

Answer 1

È necessario modificare easySlider1.5.js esistenti per soddisfare le proprie esigenze. Come mostrato nel codice è possibile aggiungere nuovo parametro hoverpause: true

In easySlider1.5.js si deve aggiungere

            hoverpause: false

in opzioni,

anche alla fine è necessario aggiungere

   if(options.hoverpause && options.auto){
            $(this).mouseover(function(){
                clearTimeout(timeout);                  
            }).mouseout(function(){
                animate("next",false);                  
            })
}

Ecco intere js

(function($) {

    $.fn.easySlider = function(options){

        // default configuration properties
        var defaults = {            
            prevId:         'prevBtn',
            prevText:       'Previous',
            nextId:         'nextBtn',  
            nextText:       'Next',
            controlsShow:   true,
            controlsBefore: '',
            controlsAfter:  '', 
            controlsFade:   true,
            firstId:        'firstBtn',
            firstText:      'First',
            firstShow:      false,
            lastId:         'lastBtn',  
            lastText:       'Last',
            lastShow:       false,              
            vertical:       false,
            speed:          800,
            auto:           false,
            pause:          4000,
            continuous:     false,
            hoverpause:     false
        }; 

        var options = $.extend(defaults, options);  

        this.each(function() {  
            var obj = $(this);              
            var s = $("li", obj).length;
            var w = $("li", obj).width(); 
            var h = $("li", obj).height(); 
            obj.width(w); 
            obj.height(h); 
            obj.css("overflow","hidden");
            var ts = s-1;
            var t = 0;
            $("ul", obj).css('width',s*w);          
            if(!options.vertical) $("li", obj).css('float','left');

            if(options.controlsShow){
                var html = options.controlsBefore;
                if(options.firstShow) html += '<span id="'+ options.firstId +'"><a href=\"javascript:void(0);\">'+ options.firstText +'</a></span>';
                html += ' <span id="'+ options.prevId +'"><a href=\"javascript:void(0);\">'+ options.prevText +'</a></span>';
                html += ' <span id="'+ options.nextId +'"><a href=\"javascript:void(0);\">'+ options.nextText +'</a></span>';
                if(options.lastShow) html += ' <span id="'+ options.lastId +'"><a href=\"javascript:void(0);\">'+ options.lastText +'</a></span>';
                html += options.controlsAfter;                      
                $(obj).after(html);                                     
            };

            $("a","#"+options.nextId).click(function(){     
                animate("next",true);
            });
            $("a","#"+options.prevId).click(function(){     
                animate("prev",true);               
            }); 
            $("a","#"+options.firstId).click(function(){        
                animate("first",true);
            });             
            $("a","#"+options.lastId).click(function(){     
                animate("last",true);               
            });     

            function animate(dir,clicked){
                var ot = t;             
                switch(dir){
                    case "next":
                        t = (ot>=ts) ? (options.continuous ? 0 : ts) : t+1;                     
                        break; 
                    case "prev":
                        t = (t<=0) ? (options.continuous ? ts : 0) : t-1;
                        break; 
                    case "first":
                        t = 0;
                        break; 
                    case "last":
                        t = ts;
                        break; 
                    default:
                        break; 
                };  

                var diff = Math.abs(ot-t);
                var speed = diff*options.speed;                     
                if(!options.vertical) {
                    p = (t*w*-1);
                    $("ul",obj).animate(
                        { marginLeft: p }, 
                        speed
                    );              
                } else {
                    p = (t*h*-1);
                    $("ul",obj).animate(
                        { marginTop: p }, 
                        speed
                    );                  
                };

                if(!options.continuous && options.controlsFade){                    
                    if(t==ts){
                        $("a","#"+options.nextId).hide();
                        $("a","#"+options.lastId).hide();
                    } else {
                        $("a","#"+options.nextId).show();
                        $("a","#"+options.lastId).show();                   
                    };
                    if(t==0){
                        $("a","#"+options.prevId).hide();
                        $("a","#"+options.firstId).hide();
                    } else {
                        $("a","#"+options.prevId).show();
                        $("a","#"+options.firstId).show();
                    };                  
                };              

                //if(clicked || (options.auto && options.pauseOnHover ) clearTimeout(timeout);
                if(options.auto && dir=="next" && !clicked){;
                    timeout = setTimeout(function(){
                        animate("next",false);
                    },diff*options.speed+options.pause);
                };

            };
            // init
            var timeout;
            if(options.auto){;
                timeout = setTimeout(function(){
                    animate("next",false);
                },options.pause);
            };      
            if(options.hoverpause && options.auto){
                $(this).mouseover(function(){
                    clearTimeout(timeout);                  
                }).mouseout(function(){
                    animate("next",false);                  
                })
            }
            if(!options.continuous && options.controlsFade){                    
                $("a","#"+options.prevId).hide();
                $("a","#"+options.firstId).hide();              
            };              

        });

    };

})(jQuery);

& HTML è possibile inizializzata cursore,

$(document).ready(function(){   
            $("#slider").easySlider({
                auto: true,
                continuous: true,
                hoverpause: true
            });
        });

Answer 2

Perché non:

        if(options.hoverpause && options.auto){
            $(this).hover(function(){
                clearTimeout(timeout);                  
            },function(){
                timeout = setTimeout(function(){
                    animate("next",false);
                },options.pause);
            })
        }

Answer 3

Se il mouseout, o come suggerito mouseLeave vuoi per riavviare il timeout invece di esso animare per l'utilizzo successivo, invece:

timeout = setTimeout(function(){
    animate("next",false);
},options.pause);

Answer 4

Grazie mille bnku. Il seguente pezzo di codice ha funzionato perfettamente bene per me come io voglio solo non ha ancora per mettere in pausa la strada normale, ho voluto mettere in pausa il dispositivo di scorrimento e tenere il mouse in movimento all'interno dell'elemento, senza essere guidato alla diapositiva successiva. Se avete bisogno di assistenza, non esitate a chiedere.

        if (options.hoverpause && options.auto){
        $('#slider').hover(function(){
                clearTimeout(timeout); 
        },function(){
        animate("next",false);
        });
        };