Foros del Web » Programando para Internet » Javascript »

Desplazamiento de carrusel

Estas en el tema de Desplazamiento de carrusel en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 26/02/2013, 04:32
Avatar de Lynxcraft  
Fecha de Ingreso: noviembre-2007
Ubicación: yecla murcia
Mensajes: 1.346
Antigüedad: 16 años, 4 meses
Puntos: 51
Desplazamiento de carrusel

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">&lt; <span>3</span> DE <span>20</span> &gt;</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
__________________
Sobran las ideas cuando faltan ganas de trabajar en ellas
Lynxcraft

Etiquetas: ajax, desplazamiento, html, jquery, js, select
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 02:56.