Wie auf schweben in einfachen Schieberegler pausieren

Question

http: // cssglobe. com / post / 4004 / easy-Slider-15-the-einfach-jquery-Plugin-for-Schiebe

Ich bin mit einfachen Schiebereglern für Banner und ich unten Skript zu spielen

genannt

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

Es ist Schiebe richtig. Aber ich will Schiebe pausieren, während schwebt auf der Folie

Answer 1

Sie müssen bestehende easySlider1.5.js ändern Ihre Anforderung gerecht zu werden. Wie im Code gezeigt können Sie neue Parameter hoverpause: true hinzufügen

In easySlider1.5.js müssen Sie

hinzufügen

            hoverpause: false

in Optionen,

auch am Ende müssen Sie hinzufügen

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

Hier ganz 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 Sie können initialisiert Schieber,

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

Answer 2

why not:

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

Answer 3

If on mouseout, or as suggested mouseleave you'd like to restart the timeout instead of it animating to the next use instead:

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

Answer 4

Thank you so much bnku. The following piece of code worked perfectly fine for me as I just didnt want to pause the regular way, I wanted to pause the slider and keep the mouse moving within the element without being driven to the next slide. If you need assistance, please feel free to ask.

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