Come mettere in pausa al passaggio del mouse a portata di cursore
-
13-10-2019 - |
Domanda
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
Soluzione
È 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
});
});
Altri suggerimenti
Perché non:
if(options.hoverpause && options.auto){
$(this).hover(function(){
clearTimeout(timeout);
},function(){
timeout = setTimeout(function(){
animate("next",false);
},options.pause);
})
}
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);
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);
});
};