Buenas amig@s hace tiempo que no paso por aquí que tal todo XD
Bueno el caso es que tengo que molestarlos de nuevo tengo un problemilla con un carrusel que se desplaza dependiendo de la posición del ratón sobre las imágenes en miniatura y si se desplaza por un scroll, hasta aquí perfecto el problema viene cuando el carrusel se a cerca al punto final empieza a dar saltos
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
</head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<body>
<style>
.scroll_cont{ width:260px; overflow:hidden; margin-top:15px; padding-bottom:10px; }
.scroll_info{ color:#403f3f; font-size:10px; display:inline-block; margin-left:15px; }
.scroll_bar{ display:inline-block; width:200px; background:#d7dada; height:8px; }
.selector_bar{ background:#000; height:8px; width:40px; cursor:all-scroll}
.scroll_bar_cont{ position:relative;}
#galley-plug-com{ position:relative}
#galley-plug{ margin-top:40px;}
#galley-plug ul, #galley-plug li{ padding:0; margin:0; list-style:none; }
#galley-plug li{ float:left; }
#galley-plug ul a{ width:50px; height:50px; display:block; overflow:hidden; margin-left:15px; }
</style>
<div id="galley-plug">
<div id="galley-plug-com"></div>
<div class="scroll_bar_cont"><div class="scroll_bar"><div class="selector_bar"></div> </div><div class="scroll_info">< <span>3</span> DE <span>20</span> ></div></div>
<div class="scroll_cont">
<ul >
<li><a href="img/18.html" href-medio="img.gif" class="inwin" data-ajax-in-win="true"><img src="img.gif" width="50" height="30" /></a></li>
</ul>
</div></div>
<script type="text/javascript">
function dis(x1, x2, x ){
var o = {xa:x1, xb:x2, x:x, dx:x2-x1, da:x-x1, db:x2-x};
var r=((o.da*1)/(o.dx));
o.pr = r; //actual percentage
o.pp = (r<0)?0:((r>1)?1:r);
o.pn = (r>0)?0:((r<-1)?-1:r);
if(r > 1) r=1; else if(r < -1) r=-1;
o.p = r;
return o;
}
function disp(x1, x2, p, ps){
var o = {xa:x1, xb:x2, dx:x2-x1, p:p };
var r = (((o.dx)*p)/(isNaN(ps)?1:ps))+x1;
o.xr = r;
if(x1<x2){
if(r > x2) r = x2;else if(r < x1) r=x1;
} else{
if(r < x2) r = x2;else if(r > x1) r=x1;
}
o.x = r;
o.da=o.xr-x1;
o.dr=o.dx-(o.xr-o.xa);
return o;
}
$(document).ready(function(){
//AUX
var li = $("#galley-plug .scroll_cont li");
for(var i=0; i<20; i++){
li.parent().append( li.clone() );
}
//END
var min_h =310;
var gal = $("#galley-plug");
var gal_img = $("#galley-plug-com");
var gal_men = $(".scroll_cont", gal);
var gal_ul_w = 0;
var fnajust= function(){
gal.each(function(){
var w = 0;
$("li", gal).each(function(){
w+=$(this).outerWidth(true);
});
$("ul",gal).width(w);
gal_ul_w=$("ul",gal).width();
});
}
fnajust();
var funscrolly = null;
var selector_bar = $(".selector_bar",gal);
var scroll_bar = $(".scroll_bar",gal);
var intervalscroll = null;
var intervalscroll_stop = false;
var scroll_cont = $(".scroll_cont",gal);
var limty = scroll_bar.width() - selector_bar.width();
var selector_bar_position_left = selector_bar.position().left;
var scroll_cont_scrollWidth=scroll_cont[0].scrollWidth -scroll_cont.width();
var ul = $("ul", gal);
var mouseX = 0
limty = scroll_bar.width() - selector_bar.width();
var w = gal_men.width();
var d = {x:0};
var vel = 0;
var delay_timeout = null;
gal_men.mousemove(function(event) {
mouseX = event.pageX-gal_men.offset().left;
var o = dis(0,w,mouseX);
d = disp(0,limty, o.p);
});
gal_men.hover(function(event) {
if(delay_timeout) clearTimeout(delay_timeout);
delay_timeout = setTimeout(function(){
intervalscroll_stop =false;
},1000);
});
var c = 0;
var fra = (gal_ul_w/w);
var p = fra*8;
intervalscroll = setInterval(function(){ if(intervalscroll_stop) return;
var x = Math.round(d.x);
if(x>c || x<c){
c+=( x - c)/p;
selector_bar.css({left:c+'px'});
if(selector_bar.position().left >=limty){
selector_bar.css({left:limty+'px'});
}
if(selector_bar.position().left <=0){
selector_bar.css({left:0});
}
scrollin(c);
}
},1000/30);
var scrollin = function (c){
var bty = (c * 100) / limty;
bty = Math.round(bty);
var ccy = ( (scroll_cont_scrollWidth) * bty)/100;
scroll_cont.scrollLeft(Math.ceil(ccy));
}
gal.each(function(){
funscrolly = function(){
if(selector_bar.position().left >=limty){
selector_bar.css({left:limty+'px'});
}
if(selector_bar.position().left <=0){
selector_bar.css({left:0});
}
c=selector_bar.position().left;
scrollin(selector_bar.position().left);
}
$( ".selector_bar", c).draggable({ containment: "parent", drag: function(e) {
intervalscroll_stop = true;
funscrolly();
}
}).click(function(){
});
});
var h = min_h;
var fn = function(src){
var im = $(new Image() );
im.load(function(){
if(h<im[0].height)
h = im[0].height;
var old = $("img",gal_img).css({position:"absolute"});
var t = (h-im[0].height)/2;
old.fadeOut("slow"); im.hide().css({position:"absolute", top:t+'px'});
gal_img.append(im);
gal_img.animate({height:h+'px'},"slow",function(){
im.fadeIn();
});
}).attr({src:src});
}
$("li a", gal).each(function(i){
var a=$(this);
var src = a.attr("href-medio");
var st = null;
a.click(function(e){ e.preventDefault();
fn(src);
});
a.hover(
function(){ if(st)clearTimeout(st);
st = setTimeout(function(){
fn(src);
},500);
},
function(){
if(st)clearTimeout(st);
});
if(i==0)fn(src);
});
setTimeout(function(){fnajust();},500);
});
</script>
</body>
</html>
lo mas seguro que el problema sea por esta parte
Código:
var fra = (gal_ul_w/w);
var p = fra*8;
intervalscroll = setInterval(function(){ if(intervalscroll_stop) return;
var x = Math.round(d.x);
if(x>c || x<c){
c+=( x - c)/p;
el
var p se encarga de fragmentar la distancia para emular la aceleración el problema es que sigue siendo muy alta cuando el carrusel se acerca al punto final y ahora no se me ocurre nada para poder disminuirla según se vaya acercado al punto final hasta llegar a 8 (el punto final en este caso seria
d.x )
Si algun@ me puede ayudar se lo agradecería mucho
Saludos