Ir para conteúdo
Fórum Script Brasil
  • 0

Problemas com o banner dinâmico


lupina

Pergunta

Olá pessoal! Preciso de uma força.

Tenho aqui um banner dinâmico em JQuery. Ele está funcionando bem no geral, o único problema é quando o usuário sai com o mouse da opção que ele selecionou e aponta o mouse para dentro da imagem, a seta escapa pra cima e a área da imagem exibida fica em branco, quando deveria ficar estática na última opção que o usuário selecionou. Como resolver?

Obrigada desde já!

Pra ver o banner funcionando, acessem: http://www.plastivida.org.br/2009/Default2.aspx (área de Destaque). Para testar, passem o mouse sobre Isopor, por exemplo, e levem o mouse até a figura.

visite.js

jQuery.easing['jswing']=jQuery.easing['swing'];
jQuery.extend(jQuery.easing,{def:'easeOutQuad',swing:function(x,t,b,c,d)
                    {return jQuery.easing[jQuery.easing.def](x,t,b,c,d)},easeInQuad:function(x,t,b,c,d)
                    {return c*(t/=d)*t+b},easeOutQuad:function(x,t,b,c,d){return-c*(t/=d)*(t-2)+b},easeInOutQuad:function(x,t,b,c,d)
                    
                    {if((t/=d/2)<1)
                        return c/2*t*t+b;return-c/2*((--t)*(t-2)-1)+b},easeInCubic:function(x,t,b,c,d)
                        {return c*(t/=d)*t*t+b},easeOutCubic:function(x,t,b,c,d){return c*((t=t/d-1)*t*t+1)+b},easeInOutCubic:function(x,t,b,c,d)
                    
                    {if((t/=d/2)<1)
                        return c/2*t*t*t+b;return c/2*((t-=2)*t*t+2)+b},easeInQuart:function(x,t,b,c,d)
                        {return c*(t/=d)*t*t*t+b},easeOutQuart:function(x,t,b,c,d){return-c*((t=t/d-1)*t*t*t-1)+b},easeInOutQuart:function(x,t,b,c,d)
                    
                    /*{if((t/=d/2)<1)
                        return c/2*t*t*t*t+b;return-c/2*((t-=2)*t*t*t-2)+b},easeInQuint:function(x,t,b,c,d)
                        {return c*(t/=d)*t*t*t*t+b},easeOutQuint:function(x,t,b,c,d){return c*((t=t/d-1)*t*t*t*t+1)+b},easeInOutQuint:function(x,t,b,c,d) */
                    
                    {if((t/=d/2)<1)
                        return c/2*t*t*t*t*t+b;return c/2*((t-=2)*t*t*t*t+2)+b},easeInSine:function(x,t,b,c,d)
                        {return-c*Math.cos(t/d*(Math.PI/2))+c+b},easeOutSine:function(x,t,b,c,d)
                        {return c*Math.sin(t/d*(Math.PI/2))+b},easeInOutSine:function(x,t,b,c,d)
                        {return-c/2*(Math.cos(Math.PI*t/d)-1)+b},easeInExpo:function(x,t,b,c,d)
                        {return(t==0)?b:c*Math.pow(2,10*(t/d-1))+b},easeOutExpo:function(x,t,b,c,d){return(t==d)?b+c:c*(-Math.pow(2,-10*t/d)+1)+b},easeInOutExpo:function(x,t,b,c,d)
                    
                    {    if(t==0)return b;
                        if(t==d)return b+c; 
                        if((t/=d/2)<1)return c/2*Math.pow(2,10*(t-1))+b;return c/2*(-Math.pow(2,-10*--t)+2)+b},easeInCirc:function(x,t,b,c,d)
                    
                    {return-c*(Math.sqrt(1-(t/=d)*t)-1)+b},easeOutCirc:function(x,t,b,c,d){return c*Math.sqrt(1-(t=t/d-1)*t)+b},easeInOutCirc:function(x,t,b,c,d)
                    {if((t/=d/2)<1)return-c/2*(Math.sqrt(1-t*t)-1)+b;return c/2*(Math.sqrt(1-(t-=2)*t)+1)+b},easeInElastic:function(x,t,b,c,d)
                    {
                        var s=1.70158;
                        var p=0;
                        var a=c;
                        
                        if(t==0)return b;
                        if((t/=d)==1)return b+c;if(!p)p=d*.3;if(a<Math.abs(c)){a=c;var s=p/3}else 
                            var s=p/(2*Math.PI)*Math.asin(c/a);return-(a*Math.pow(2,10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p))+b},easeOutElastic:function(x,t,b,c,d){var s=1.70158;var p=0;var a=c;if(t==0)return b;if((t/=d)==1)return b+c;if(!p)p=d*.3;if(a<Math.abs(c))
                    {
                        a=c;
                        var s=p/3}else var s=p/(2*Math.PI)*Math.asin(c/a);return a*Math.pow(2,-10*t)*Math.sin((t*d-s)*(2*Math.PI)/p)+c+b},easeInOutElastic:function(x,t,b,c,d)
                    {
                        var s=1.70158;
                        var p=0;
                        var a=c;
                        
                        if(t==0)return b;
                        if((t/=d/2)==2)return b+c;if(!p)p=d*(.3*1.5);if(a<Math.abs(c))
                    {
                        a=c;
                        var s=p/3}else var s=p/(2*Math.PI)*Math.asin(c/a);if(t<1)return-.5*(a*Math.pow(2,10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p))+b;return a*Math.pow(2,-10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p)*.5+c+b},easeInBack:function(x,t,b,c,d,s){if(s==undefined)s=1.70158;return c*(t/=d)*t*((s+1)*t-s)+b},easeOutBack:function(x,t,b,c,d,s)
                    {if(s==undefined)s=1.70158;return c*((t=t/d-1)*t*((s+1)*t+s)+1)+b},easeInOutBack:function(x,t,b,c,d,s){if(s==undefined)s=1.70158;if((t/=d/2)<1)return c/2*(t*t*(((s*=(1.525))+1)*t-s))+b;return c/2*((t-=2)*t*(((s*=(1.525))+1)*t+s)+2)+b},easeInBounce:function(x,t,b,c,d)
                    {return c-jQuery.easing.easeOutBounce(x,d-t,0,c,d)+b},easeOutBounce:function(x,t,b,c,d)
                    
                    {if((t/=d)<(1/2.75))
                    {return c*(7.5625*t*t)+b}
                            else if(t<(2/2.75)){return c*(7.5625*(t-=(1.5/2.75))*t+.75)+b}
                            else if(t<(2.5/2.75)){return c*(7.5625*(t-=(2.25/2.75))*t+.9375)+b}
                            else
                    {return c*(7.5625*(t-=(2.625/2.75))*t+.984375)+b}},easeInOutBounce:function(x,t,b,c,d){if(t<d/2)return jQuery.easing.easeInBounce(x,t*2,0,c,d)*.5+b;
                        return jQuery.easing.easeOutBounce(x,t*2-d,0,c,d)*.5+c*.5+b}});


//
//Featured
function move_slider(i) {
    step = i;
    $('#controls li').removeAttr('style');
    $('#controls li:eq(' + i + ')').css({color: '#FFF'});

    $('#slider').stop().animate({
        top: -1 * (i - 1) * 240
    }, 500, 'easeOutExpo');

    $('#arrow').stop().animate({
        top: 1 * (i - 1) * 50
    }, 500, 'easeOutExpo');
}

var pilot = '',
    step = 1;

function auto_pilot() {
    if(step < 3) {
        move_slider(step + 1);
    } else {
        move_slider(1);
    }
} move_slider(1);

function restart() {
    pilot = window.setInterval(auto_pilot, 10000);
} restart();

$('#featured').hover(function(){
    clearInterval(pilot);
}, function(){
    restart();
});

$('#featured').each(function() {
    $('#controls li').live('mouseenter', function() {
        var i = $(this).index();
            i = parseInt(i,10);
        move_slider(i);
    });
});
css
#main{margin:25px 0;overflow:hidden; font-family:Tahoma; border:none;outline:none;padding:0;vertical-align:baseline;}
#esq-sup{width:20px; height:25px; margin-top:24px; margin-left:0px; position:absolute; z-index:3; float:right;}
#esq-inf{width:20px; height:25px; margin-top:152px; margin-left:0px; position:absolute; z-index:3; float:right;}
#dir-sup{width:20px; height:25px; margin-top:24px; margin-left:530px; position:absolute; z-index:3; float:right;}
#dir-inf{width:20px; height:25px; margin-top:152px; margin-left:530px; position:absolute; z-index:3; float:right;}

#main #section{float:left;margin:0 0 0 0;overflow:hidden;width:550px;}

#main #section .share strong{float:left;padding:2px 5px 0 0;}
#main #featured{height:150px;overflow:hidden;position:relative;}

#main #featured ul{background:url(../images/js-pontoverde.png);font-size:14px;list-style:none;position:absolute; top:-15px; right:0;width:50px;z-index:2;}
#main #featured ul #arrow{background:url(../images/js-seta.png) no-repeat bottom left;left:-20px;position:absolute;width:120px;z-index:1;}
#main #featured ul li{background:transparent;cursor:pointer;height:50px;line-height:50px;position:relative;left:-20px;width:140px;z-index:2;}
#main #featured #slider{position:absolute;z-index:1;}
#main #featured .frame{height:240px;overflow:hidden;position:relative;}
#main #featured .frame img{height:auto;width:550px;}

#main #featured .subtitle{background:url(../images/js-pontoazul.png) no-repeat;color:#fff;margin:-25px 0 0;padding:10px;position:absolute;left:0;top:10%;width:180px;}
#main #featured .subtitle h3{font-size:14px;margin:0 0 7px;text-transform:uppercase;}
#main #featured .subtitle p{font-size:12px;line-height:14px;}
#main #content{float:left;width:532px;}
html
<div id="main"> 
        <div id="section">
                <div id="featured">
                    <ul id="controls">
                        <li id="arrow"></li>
                        <li class="frame1 open">Sacolas</li>
                        <li class="frame2">Isopor&reg;</li>
                        <li class="frame3">PEV-M</li>
                        <!--- <li class="frame4">-</li> --->
                    </ul>

                    <div id="slider">

                            <div class="frame" id="frame1">
                                    <div class="subtitle">
                                        <h3>Sacolas Plásticas</h3>
                                        <p>O objetivo desse Programa é reduzir em 30% o desperdício dassacolas plásticas distribuídas pelo varejo</p>
                                    </div>

                                <a href="http://www.plastivida.org.br/2009/Projetos_SacolasPlasticas.aspx">
                  <img src="images/js-1.jpg" alt="Sacolinhas plásticas" />
                </a>
                            </div>


                            <div class="frame" id="frame2">
                              <div class="subtitle">
                                <h3>Isopor&reg;</h3>
                                <p> O Isopor&reg; &eacute; a marca comercial para 2 tipos t&eacute;cnicos de produtos: Poliestireno Expandido e Poliestireno Extrusado</p>
                                </div>

                                  <a href="http://www.plastivida.org.br/2009/Isopor_Projeto.aspx"><img src="images/js-2.jpg" alt="Reciclagem de Isopor" />
                                  </a>
                                 
                              
                            </div>


                            <div class="frame" id="frame3">
                              <div class="subtitle">
                                <h3>PEV-M</h3>
                                <p> Os PEV&rsquo;s-M s&atilde;o cont&ecirc;ineres inspirados em bancas de jornais para estimular a coleta seletiva do lixo. </p>
                                </div>

                                <a href="http://www.plastivida.org.br/2009/Projetos_PEVM.aspx">
                  <img src="images/js-3.jpg" alt="Coleta seletiva" />
                </a>
                </div> 
                            </div>
<!---
                            <div class="frame" id="frame4">
                                <div class="subtitle">
                                    <h3>-</h3>
                                    <p>-</p>
                                </div>
                                <a href="/" target="_blank">
                  <img src="-" alt="-" />
                </a>
                            </div>  --->
                           
</div> 
 </div> </div>

Link para o comentário
Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Até agora não há respostas para essa pergunta

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,3k
×
×
  • Criar Novo...