Comment faire une pause sur le vol stationnaire à curseur facile
-
13-10-2019 - |
Question
http: // cssglobe. com / post / 4004 / facile curseur-15 le plus facile jquery-plugin-pour-glisser
J'utilise curseur facile pour bannière et j'ai appelé ci-dessous script pour jouer
$("#slider").easySlider({
auto: true,
continuous: true,
nextId: "slider1next",
prevId: "slider1prev",
hoverpause: true });
});
Il est coulissant correctement. Mais je veux faire une pause de glissement, vol stationnaire Alors que sur la diapositive
La solution
Vous devez modifier easySlider1.5.js existants pour répondre à vos besoins. Comme on le voit dans votre code, vous pouvez ajouter nouveau paramètre hoverpause: true
En easySlider1.5.js vous devez ajouter
hoverpause: false
dans les options,
également à la fin, vous devez ajouter
if(options.hoverpause && options.auto){
$(this).mouseover(function(){
clearTimeout(timeout);
}).mouseout(function(){
animate("next",false);
})
}
Voici js ensemble
(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, vous pouvez initialiser curseur,
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true,
hoverpause: true
});
});
Autres conseils
pourquoi pas:
if(options.hoverpause && options.auto){
$(this).hover(function(){
clearTimeout(timeout);
},function(){
timeout = setTimeout(function(){
animate("next",false);
},options.pause);
})
}
Si le mouseout, ou comme l'a suggéré mouseleave vous souhaitez redémarrer le délai d'attente au lieu de l'animation à l'autre utiliser:
timeout = setTimeout(function(){
animate("next",false);
},options.pause);
Merci beaucoup bnku. La pièce suivante de code fonctionnait parfaitement bien pour moi que je veux juste na pas de faire une pause de la manière habituelle, je voulais mettre en pause le curseur de la souris et de garder en mouvement dans l'élément sans entraînement à la diapositive suivante. Si vous avez besoin d'aide, s'il vous plaît ne hésitez pas à demander.
if (options.hoverpause && options.auto){
$('#slider').hover(function(){
clearTimeout(timeout);
},function(){
animate("next",false);
});
};