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>
Código:
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 )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;
Si algun@ me puede ayudar se lo agradecería mucho
Saludos
