Movimento de imagem em quadro parado

[Eng.Lucas 0]

Tudo bem pessoal?

 

Estou tentando resolver um problema e gostaria da ajuda de vocês.

 

Preciso fazer um slider semelhante ao deste site "http://www.fgempreendimentos.com.br/" porém gostaria de fazê-lo em JQuery (no caso ele está em Flash).

 

Meu principal problema, até agora, é realizar o efeito de movimentação da foto por traz da moldura. Até o momento o máximo que consegui foi fazê-la se deslocar, porém ela fica cortada no limite anterior, ficando assim com o fundo branco.

 

Possívelmente é um problema de principiante porém estou aprendendo a utilizar jquery agora e não achei nenhum tutorial deste tipo.

 

Desde ja agradeço.

 

Lucas Oliveira

[Bergs 53]

posta os códigos ou um link do que vc já fez.

[Eng.Lucas 0]

Bom o que eu tenho até agora é o seguinte:

 

HTML:

<div id="moldura-esquerda">
</div>

<div id="imagens">

<ul>
<li><img src="img/imagem12.png" /></li>
<li><img src="img/imagem2.png" /></li>
<li><img src="img/imagem3.png" /></li>
<li><img src="img/imagem4.png" /></li>
</ul>

</div>

<div id="pager">
</div>

<div id="moldura-direita">

</div>

 

CSS

 

#moldura-esquerda{
background:url(../img/moldura-esquerda.png) no-repeat;
width:211px;
height:650px;
float:left;
}
#imagens{
width:778px;
height:650px;
float:left;
overflow:hidden;
z-index:1;
}

#imagens ul{
position:relative;
width:778px;
height:650px;
clear:both;
}

#pager{
float:left;
position:relative;
z-index:5;
margin-left:-295px;
margin-top:600px;
}

#pager a{
background:url(../img/botao.png);
float:left;
width:48px;
height:39px;
text-decoration:none;
font-family:Verdana, Geneva, sans-serif;
font-size:25px;
color:white;
padding-top:11px;
padding-left:24px;
display:block;

}

#pager a:focus { outline: none; }

#moldura-direita{
background:url(../img/moldura-direita.png) no-repeat;
width:211px;
height:650px;
float:left;
}

 

 

SCRIPT (no caso usando o plug-in cicle)

 

<script type="text/javascript">

$(function(){
$("#imagens ul").cycle({
fx:'fade',
pause: true, // Pausa ao passar o mouse sobre ele?
pauseOnPagerHover: true, // Pausa ao passar o mouse sobre as páginas
speed: 2000,
timeout: 5000,
pager:'#pager',


after: function() {

$("#imagens ul li").animate({left:'+=200px'},2000);
}
})
})

</script>

[Eng.Lucas 0]

No caso ja tentei alterar o valor de width da ul ou até mesmo da li, mas também não resolveu.

[William Bruno 1501]

a foto tem mais altura doq a moldura.

 

e é escondida com overflow: hidden;

 

ai funciona.

[Eng.Lucas 0]

Opa Bruno, valeu pela resposta!

 

Então, ja tentei com a foto muito maior para resolver o problema mas ela ainda é cortada onde antes havia a moldura, no caso do overflow, eu ja havia colocado ele sobre a div das imagens para fazer o fazer slider, mas também não funcionou...

Uma idéia que me ocorreu agora foi de usar as fotos como background em uma ul de divs, e tentar mudar a largura de cada uma por css...

Não sei se vai mudar alguma coisa mas assim que eu tiver um resultado eu posto aqui.