Ir para conteúdo

Arquivado

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

Andreatti

[Resolvido] Carregar imagens aleatorias de uma pasta.

Por , em Javascript

Recommended Posts

Andreatti    0

Andreatti
Postado

Ola galera. Andei um pouco sumido, mais to eu aqui de volta com uma grande duvida.

To fazendo um site para um trabalho final do meu curso e preciso de uma ajuda. Vou explicar o que quero:

 

Primeiramente eu tenho a logomarca do site(ou empresa) que é carregada em todas as paginas(quando abertas), porem junto com essa logomarca eu quero colocar uma imagen ao lado dela, porem essa imagem devera ser de forma aleatoria.

Tenho essas imagems guardadas em uma pasta. Quero que na hora que a pagina for carregada, eu pego uma imagem aleatoria e coloco do lado da logomarca.

Alguem pode me dar uma solução? Nao sei se isso é feito em HTML(CSS) ou se é feito em JavaScript.

 

Agradeço desde ja pela ajuda.

Tenham uma otima noite.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Andreatti    0

Andreatti
Postado

Eu estou fazendo curso... PHP eu ainda nai vi nda sobre ele. Mais eu pretendo usa-lo no site, assim como HTML e JavaScript.

 

Se voce souber em fazer em JavaScript fica bem melhor pra min, senao PHP tmb ajuda.

 

Obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

angelorubin    142

angelorubin
Postado

Bom dia,

 

Você pode fazer da seguinte forma tambem (imaginando que você entenda um pouco de XHTML, CSS e JQUERY).

 

Exemplo Online - http://www.angelorubin.zymichost.com/IMASTERS/slider_topo/imagem_topo_aleatoria.html

 

OBS: lembrando que você deve colocar a chamada para a biblioteca JQUERY e o javascript no cabeçalho do seu documento.

 

Com este código:

 

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
</head>

XHTML

 

<div>

<div id="box_topo">

<img class="logo" src="img/8728.jpg" />

<div id="slideshow">
    <img src="img/3360.jpg" alt="" width="200" height="133" />
    <img src="img/7374.jpg" alt="" width="200" height="133" />
    <img src="img/9538.jpg" alt="" width="200" height="133" />
</div>

</div>

</div>

JAVASCRIPT (JQUERY)

 


<script type="text/javascript">

function slideSwitch() {
    var $active = $('#slideshow IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    var $next =  $active.next().length ? $active.next()
        : $('#slideshow IMG:first');

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 5000 );
});


</script>

CSS

 

<style type="text/css">

<!--INICIO SLIDER-->

#slideshow {
    height:auto;
}

#slideshow IMG {
    position:absolute;
	margin:5px 5px 5px 0;
    z-index:8;
	border:2px solid #000;
}

#slideshow IMG.active {
    z-index:10;
}

#slideshow IMG.last-active {
    z-index:9;
}


<!--FIM SLIDER-->

#box_geral {
	width:99%;
	height:450px;
	overflow:hidden;
	border:1px solid #CCC;
}

#box_topo {
	margin:1px;
	width:99.8%;
	height:200px;
	background-color:#CCC;
}

.logo {
	margin:5px;
	border:none;
	width:200px;
	height:150px;
	float:left;
}

.banner {
	margin:5px;
	border:none;
	width:200px;
	height:150px;
	float:left;
}
</style>

OBS: Caso eu esteja postando coisas que não podem nesta seção por favor moderadores me avisem !

Espero que ajude.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Tópico movido:

 

Webstandards: CSS / XML / XHTML / HTML http://forum.imasters.com.br/public/style_emoticons/default/seta.gif JavaScript / DHTML

 

É esse efeito que o Angelo postou que você deseja ou é ao carregar a página, colocar uma imagem aleatória?

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

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