Ir para conteúdo

POWERED BY:

Arquivado

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

Clauido José

Imagem muda ao atualizar o browser

Recommended Posts

Galera to com um site de um cliente que na pagina principal existem imagens estáticas na tela mostra só 4 mas no banco tem mais 50 eu quero que toda vez que o usuário atualizar o browser ela mude pra outa uso asp e mysql

Compartilhar este post


Link para o post
Compartilhar em outros sites

existem alguns exemplos no lab. de script dá uma olhada. E se quiser para não consumir recursos de bd use js, olha este exemplo, onde você pode alterar as imagens de background da página automaticamente a cada 3 segundos.

 

    <script type="text/javascript">// <![CDATA[
    var imageCount = 0;
    var currentImage = 0;
    var images = new Array();
     
    images[0] = 'ENDERECO DA IMAGEM';
    images[1] = 'ENDERECO DA IMAGEM';
    images[2] = 'ENDERECO DA IMAGEM';
    images[3] = 'ENDERECO DA IMAGEM';
    images[4] = 'ENDERECO DA IMAGEM';
     
    var preLoadImages = new Array();
    for (var i = 0; i < images.length; i++)
    {
    if (images[i] == "")
    break;
     
    preLoadImages[i] = new Image();
    preLoadImages[i].src = images[i];
    imageCount++;
    }
     
    function startSlideShow()
    {
    if (document.body && imageCount > 0)
    {
    document.body.style.backgroundImage = "url("+images[currentImage]+")";
    document.body.style.backgroundAttachment = "fixed";
    document.body.style.backgroundRepeat = "repeat";
    document.body.style.backgroundPosition = "left top";
     
    currentImage = currentImage + 1;
    if (currentImage > (imageCount-1))
    {
    currentImage = 0;
    }
    setTimeout('startSlideShow()', 3000);
    }
    }
    startSlideShow();
    // ]]></script>

outro exemplo:

 

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Untitled Document</title>
<script type="text/javascript">
var imagens        = new Array( 'imagem 1.png', 'imagem 2.png', 'imagem 3.gif');
var num_img    = 3;
var img_atual =0;

function ChangeImg()
{
	if (img_atual < (num_img - 1) ) 
    {
		img_atual = img_atual + 1;
    }
    else
    {
		img_atual = 0;
    }
	document["img_apoio"].src    = "dir_img/" + imagens[img_atual];
    var x = setTimeout ("ChangeImg()", 5000);
}
</script>
</head>

<body style="padding:0; margin:0" Onload="ChangeImg()">

<img width="268" height="68" name="img_apoio" src="dir_img/sabesp.gif" border="0" alt="" />

</body>
</html>

Compartilhar este post


Link para o post
Compartilhar em outros sites

isso não resolve meu problema isso ele já faz eu quero toda vez que o browser for atualizado ele mude as quatro imagens que estão aparecendo vou dar um exemplo, na pagina principal existem um div com falando da empresa e do lado outra com os parceiros a empresa tem mas de cinquenta hoje toda vez que entro no site sempre mostra o mesmos parceiros.

Compartilhar este post


Link para o post
Compartilhar em outros sites

esse exemplo muda a cada 5 segundos, vc pode deixar fixo e jogar no onload da página, até mesmo fazer um random nas 50 empresas, faz por js fica mais leve. Ou também com CSS ou até mesmo um jquery dinâmico fica bom

 

CSS:

  1. .bg1 { background-image: url(img1.jpg);}
  2. .bg2 { background-image: url(img2.jpg);}
  3. .bg3 { background-image: url(img3.jpg);}

dae você criar um array em ASP pra poder armazenar os itens, e selecionar aleatoriamente com o “RAND”.

 

Ou melhor ainda, use este plugin jquery -Maximage para criar um impressionante show de slides na imagem de fundo.

Compartilhar este post


Link para o post
Compartilhar em outros sites

existem outros efeitos legais e leves com jquery

Compartilhar este post


Link para o post
Compartilhar em outros sites

em partes funciona legal desse jeito mas estou em duvida mo meu caso porque é assim no site:

 

 

imagem1 imagem2

imagem3 imagem4

 

 

Como controlar as 4 imagens opara não se repitirem?

Compartilhar este post


Link para o post
Compartilhar em outros sites

usa um randon

Compartilhar este post


Link para o post
Compartilhar em outros sites

resolvi essa fico legal olha só.

		//retornando o rand atual
			var imagens1 = new Array( 'logo_imagem1.jpg', 'logo_imagem2.jpg', 'logo_imagem3.jpg', 'logo_imagem4.jpg','logo_imagem5.jpg', 'logo_imagem11.jpg');
			var imagens2 = new Array( 'logo_imagem6.jpg', 'logo_imagem7.jpg', 'logo_imagem8.jpg', 'logo_imagem9.jpg','logo_imagem10.jpg','logo_imagem12.jpg');
			var imagens3 = new Array( 'logo_imagem14.jpg', 'logo_imagem14.jpg', 'logo_imagem15.jpg', 'logo_imagem16.jpg','logo_imagem17.jpg', 'logo_imagem18.jpg');
			var imagens4 = new Array( 'logo_imagem19.jpg', 'logo_imagem20.jpg', 'logo_imagem21.jpg', 'logo_imagem22.jpg');
			
			var num_img  = 6;
			var num_img2 = 4;
			var img_atual =0;
        
			function ChangeImg()
			{
				if (img_atual < (num_img - 1) ) 
				{
					img_atual = img_atual + 1;
				}
				else
				{
					img_atual = 0;
				}
				document["img_apoio1"].src    = "images/galeriaclientes/" + imagens1[img_atual];
				document["img_apoio2"].src    = "images/galeriaclientes/" + imagens2[img_atual];
				document["img_apoio3"].src    = "images/galeriaclientes/" + imagens3[img_atual];
				if (img_atual < (num_img2 - 1) ) 
				{
					img_atual = img_atual + 1;
				}
				else
				{
					img_atual = 0;
				}
				document["img_apoio4"].src    = "images/galeriaclientes/" + imagens4[img_atual];
				var x = setTimeout ("ChangeImg()", 5000);
			}
                <div class="parceiro" style="margin:15px auto">
                    <h2>Nossos Parceiros</h2>
                    <img width="160" height="80" name="img_apoio1" src="images/galeriaclientes/logo_imagem1.jpg" border="0" alt="" />
                    <img width="160" height="80" name="img_apoio2" src="images/galeriaclientes/logo_imagem6.jpg" border="0" alt="" />
                    <img width="160" height="80" name="img_apoio3" src="images/galeriaclientes/logo_imagem11.jpg" border="0" alt="" />
                    <img width="160" height="80" name="img_apoio4" src="images/galeriaclientes/logo_imagem17.jpg" border="0" alt="" />
                    <h6><a href="clientes.asp">ver mais</a></h6>  
                </div> 

Compartilhar este post


Link para o post
Compartilhar em outros sites

maravilha... simples e funcional...

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

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