Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Felipe Torres

Slide em forma de ESTEIRA...

Por , em Javascript

Recommended Posts

Felipe Torres    1

Felipe Torres
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Ismaeldm    5

Ismaeldm
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

Felipe Torres    1

Felipe Torres
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Ismaeldm    5

Ismaeldm
Postado

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ê :)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Felipe Torres    1

Felipe Torres
Postado

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+

Compartilhar este post

Link para o post
Compartilhar em outros sites

Ismaeldm    5

Ismaeldm
Postado

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:

Compartilhar este post

Link para o post
Compartilhar em outros sites

Felipe Torres    1

Felipe Torres
Postado

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;
}
#slideJQuery div {
}
#slideJQuery img {
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>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito