Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Bom dia galera, eu procurei na internet mas não achei nenhum resultado, to com um projeto e o cliente quer colocar um slide em forma de ESTEIRA.
Ele quer que os produtos dele fique passando sem parar, como se fosse um SLIDE JQUERY, mas sem aquele efeitos.
Alguém já viu ou fez algo do tipo?
abraço.
>
Quando você diz "esteira" quer dizer que o efeito nunca termina? tipo, ele vai ficar dando slide e mostrando o conteúdo sem parar... é isso?
é como se tivesse uma scrollbar que decesse sozinha? xD
Isso o efeito nunca termina.
Ele fica mostrando o efeito sem parar.
Essa scrollbar é sem, na verdade ele vem de um lado para o outro passando as fotos do produto.
>
Isso o efeito nunca termina.
Ele fica mostrando o efeito sem parar.
Essa scrollbar é sem, na verdade ele vem de um lado para o outro passando as fotos do produto.
Humm, para fazer isso precisamos o seguinte...
Uma DIV onde vai ter overflow:hidden;
Dentro dessa DIV colocar todo o conteúdo
Aí vamos ter que ler o tamanho da DIV e aplicar de margin-top ao conteúdo
Depois tem que ler o tamanho de todo o conteúdo e ir decrementando da margin-top aos poucos, até que a margin fiquei com um numero negativo igual ao numero positivo do conteúdo
E depois que terminar o processo, repetí-lo xD
Sei fazer isso com JQuery, se você quiser faço um código pra você :)
>
Humm, para fazer isso precisamos o seguinte...
Uma DIV onde vai ter overflow:hidden;
Dentro dessa DIV colocar todo o conteúdo
Aí vamos ter que ler o tamanho da DIV e aplicar de margin-top ao conteúdo
Depois tem que ler o tamanho de todo o conteúdo e ir decrementando da margin-top aos poucos, até que a margin fiquei com um numero negativo igual ao numero positivo do conteúdo
E depois que terminar o processo, repetí-lo xD
Sei fazer isso com JQuery, se você quiser faço um código pra você :)
Po, cara eu queria sim e isso irá ter algum custo, como é?
Se não for gerar custo, eu aceito d+
>
Po, cara eu queria sim e isso irá ter algum custo, como é?
Se não for gerar custo, eu aceito d+
Me adiciona no msn: ismael.dullius.machado@hotmail.com
Eu faço isso mais por hobbi, então tem custo nenhum :thumbsup:
Pessoal o Ismael fez esse código. O efeito é esse mesmo, porém eu queria que acrescenta-se as setas para ir e voltar e quando colocar o mouse por cima, a esteira para. O código é esse:
<style type="text/css">
#slideJQuery {
background-image: url(background.jpg);
background-repeat: repeat-x;
width: 953px;
height: 518px;
overflow: hidden;
}float: left;
top: ;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#slideJQuery').each(function animacao(){
var images = $(this).find('img').size();
var width = 0;
for (cont=images-1; cont>=0; cont--) {
var widthimg = $(this).find('img').eq(cont).width();
var heightimg = $(this).find('img').eq(cont).height();
var heightimg = 518 - heightimg - 20;
$(this).find('img').eq(cont).css('margin-top', heightimg);
var width = width + widthimg;
};
$(this).find('div').css('width', width);
var width = $(this).find('div').width();
var tempo = images*2000;
$('#slideJQuery').find('div').css('margin-left', '953px');
setTimeout("animacao()",10000);
});
});
function animacao() {
var images = $('#slideJQuery').find('img').size();
var width = $('#slideJQuery div').width();
var tempo = images*10000;
$('#slideJQuery').find('div').css('margin-left', '953px').animate({marginLeft:'-'+width}, tempo, function(){setTimeout("animacao()"),1});
};
</script>
</head>
<body>
<div id="slideJQuery">
<div>
<img src="http://www.harvard.edu/sites/default/files/home_features/Faust_Hockfield_522.jpg" width="522" height="348" />
<img src="http://www.harvard.edu/sites/default/files/home_features/Jonathan_Walton_522.jpg" width="522" height="348" />
<img src="http://www.harvard.edu/sites/default/files/home_features/Lithgow_Jones_522.jpg" width="522" height="348" />
<img src="http://www.harvard.edu/sites/default/files/home_features/CabotHouse_522.jpg" width="522" height="348" />
<img src="http://www.harvard.edu/sites/default/files/home_features/050312_Features_0219.jpg" width="605" height="403" />
</div>
</div>
Quando você diz "esteira" quer dizer que o efeito nunca termina? tipo, ele vai ficar dando slide e mostrando o conteúdo sem parar... é isso?
é como se tivesse uma scrollbar que decesse sozinha? xD