Logos aleatórios

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Atendido / Resolvido Logos aleatórios

Mensagem por BichodoMato em 30.05.19 14:14

Detalhes da questão


Endereço do fórum: http://narutosurvivalgold.forumeiros.com/
Versão do fórum: phpBB3

Descrição


Olá, minha dúvida se explica no título.

Eu tenho uma lista de imagens com fundo transparente que pretendo colocar na logo, porém uma de cada vez. A intenção é fazer com que a cada atualização de página, essa imagem mude para outra. Como faço isso? Alguém tem algum código?

Esse é o CSS do meu fórum:

Código:
.logo-imagem {
background-image: url(https://i.imgur.com/5UWkyS1.png);
height: 490px;
width: 800px;
background-repeat: no-repeat;
background-position: center 0px;
margin-left: 550px;
margin-top: -0px;
}
BichodoMato

BichodoMato
Usuário avançado

Masculino
Inscrito dia : 07/07/2013
Mensagens : 389
Pontos Ativos : 643

http://naruto-survival.forumeiros.com

Atendido / Resolvido Re: Logos aleatórios

Mensagem por AquilesD. em 30.05.19 21:30

Olá,

Confira o tutorial abaixo

[TUTORIAL] Logo Aleatório

Título alterado para "Logos aleatórios"


Até mais!


Logos aleatórios WpZJdpr
Bem-vindo(a) ao Fórum dos Fóruns Convidado!
Leia as Regras do Fórum dos Fóruns (FDF) e o Regulamento do setor de Suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum.
AquilesD.

AquilesD.
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 10/02/2012
Mensagens : 6039
Pontos Ativos : 7768

https://ajuda.forumeiros.com

Atendido / Resolvido Re: Logos aleatórios

Mensagem por Garyôsen em 31.05.19 4:03

Já tentei aplicar esse código, mas ele não funcionou. Teria algum outro formato? Porque
eu já tentei com esse código e por algum motivo não funcionou, eu não entendo de jQuery.

Código:
var banner = new Array();

banner[0]='https://i.imgur.com/cYjl9Ay.png';
banner[1]='https://i.imgur.com/5UWkyS1.png';
banner[2]='https://i.imgur.com/MGHOty5.png';

document.getElementById('logo').firstChild.src= banner[Math.floor(Math.random()*banner.length)];
setInterval("document.getElementById('logo').firstChild.src= banner[Math.floor(Math.random()*banner.length)];",3000);

Código:

 <div class="logo-fundo" id="top">
<center>
<div class="logo-imagem"><script src="http://narutosurvivalgold.forumeiros.com/h10-logo-imagens-rotativas"></script></div>
<div class="logo-titulo">Naruto Survival <gold>Gold</gold>
  </div>

<div class="logo-desc">O Naruto Survival Gold é um estilo de RPG PbF (Play by Fórum) gratuito feito de fãs para fãs, cuja única finalidade é providenciar diversão a todos num ambiente digno, imersivo e mais fiel possível ao anime e mangá Naruto. Tudo isso num cenário online e competitivo, onde a sobrevivência de cada um depende sumariamente de seus esforços e estratégias, mas também de seu respeito pela comunidade. Mais do que tudo, o Naruto Survival Gold é único, não apenas por ser o trabalho da vida de seu fundador e ser aperfeiçoado constantemente ao longo de cinco anos de existência, mas também por contar com a contribuição, dedicação e indelével carinho daqueles que fazem deste jogo cada vez mais insuperável. Junte-se a nós e torne-se um sobrevivente também!</div>
  </center>
  </div>
Garyôsen

Garyôsen
Nível 2

Masculino
Inscrito dia : 03/04/2019
Mensagens : 12
Pontos Ativos : 24

http://pokemon-erilea.forumeiros.com

Atendido / Resolvido Re: Logos aleatórios

Mensagem por BichodoMato em 01.06.19 23:17

@Garyôsen escreveu:Já tentei aplicar esse código, mas ele não funcionou. Teria algum outro formato? Porque
eu já tentei com esse código e por algum motivo não funcionou, eu não entendo de jQuery.

Código:
var banner = new Array();

banner[0]='https://i.imgur.com/cYjl9Ay.png';
banner[1]='https://i.imgur.com/5UWkyS1.png';
banner[2]='https://i.imgur.com/MGHOty5.png';

document.getElementById('logo').firstChild.src= banner[Math.floor(Math.random()*banner.length)];
setInterval("document.getElementById('logo').firstChild.src= banner[Math.floor(Math.random()*banner.length)];",3000);

Código:

 <div class="logo-fundo" id="top">
<center>
<div class="logo-imagem"><script src="http://narutosurvivalgold.forumeiros.com/h10-logo-imagens-rotativas"></script></div>
<div class="logo-titulo">Naruto Survival <gold>Gold</gold>
  </div>

<div class="logo-desc">O Naruto Survival Gold é um estilo de RPG PbF (Play by Fórum) gratuito feito de fãs para fãs, cuja única finalidade é providenciar diversão a todos num ambiente digno, imersivo e mais fiel possível ao anime e mangá Naruto. Tudo isso num cenário online e competitivo, onde a sobrevivência de cada um depende sumariamente de seus esforços e estratégias, mas também de seu respeito pela comunidade. Mais do que tudo, o Naruto Survival Gold é único, não apenas por ser o trabalho da vida de seu fundador e ser aperfeiçoado constantemente ao longo de cinco anos de existência, mas também por contar com a contribuição, dedicação e indelével carinho daqueles que fazem deste jogo cada vez mais insuperável. Junte-se a nós e torne-se um sobrevivente também!</div>
  </center>
  </div>

Obs: Garyôsen trabalha no meu fórum, portanto a questão dele é a mesma que a minha.
BichodoMato

BichodoMato
Usuário avançado

Masculino
Inscrito dia : 07/07/2013
Mensagens : 389
Pontos Ativos : 643

http://naruto-survival.forumeiros.com

Atendido / Resolvido Re: Logos aleatórios

Mensagem por Pedxz em 02.06.19 8:33

Olá @BichodoMato e @Garyôsen,
Os senhores já adicionaram o código em cima, numa página JavaScript, não duma HTML?

Leiam também o seguinte tópico: Questão Resolvida. Qualquer dúvida diga!


Cordialmente,
pedxz.


Bem-vindo ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum.
Pedxz Moderadeiro
Pedxz

Pedxz
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 13/01/2017
Mensagens : 3069
Pontos Ativos : 3780

https://power-pixel.net

Atendido / Resolvido Re: Logos aleatórios

Mensagem por BichodoMato em 03.06.19 12:46

@Pedxz escreveu:Olá @BichodoMato e @"Garyôsen",
Os senhores já adicionaram o código em cima, numa página JavaScript, não duma HTML?

Leiam também o seguinte tópico: Questão Resolvida. Qualquer dúvida diga!


Cordialmente,
pedxz.

Bom dia Pedxz. Então, fiz como o senhor pediu, adicionei diretamente o primeiro código na página de códigos javascript com investimento para todas as páginas, mas não resultou em nada... como antes.

Também li o tópico que passou, apliquei todos os códigos mas nada aconteceu novamente.
BichodoMato

BichodoMato
Usuário avançado

Masculino
Inscrito dia : 07/07/2013
Mensagens : 389
Pontos Ativos : 643

http://naruto-survival.forumeiros.com

Atendido / Resolvido Re: Logos aleatórios

Mensagem por Garyôsen em 03.06.19 23:03

@Pedxz escreveu:Olá @BichodoMato e @"Garyôsen",
Os senhores já adicionaram o código em cima, numa página JavaScript, não duma HTML?

Leiam também o seguinte tópico: Questão Resolvida. Qualquer dúvida diga!


Cordialmente,
pedxz.

Boa noite. Este código está programado para a versão phpbb2, e pelo que parece, ele tem diferenças para cada versão. Parece que esses códigos selecionam as tags, e como eu citei lá em cima com o @BichodoMato, o código da imagem do logo é personalizada pela tag .logo-imagem, não sei se tem diferenças com relação a isso.
Garyôsen

Garyôsen
Nível 2

Masculino
Inscrito dia : 03/04/2019
Mensagens : 12
Pontos Ativos : 24

http://pokemon-erilea.forumeiros.com

Atendido / Resolvido Re: Logos aleatórios

Mensagem por AquilesD. em 04.06.19 11:37

Olá,

Substitua o JS pelo seguinte

Código:
var banner = new Array();
 
banner[0]='https://i.imgur.com/cYjl9Ay.png';
banner[1]='https://i.imgur.com/5UWkyS1.png';
banner[2]='https://i.imgur.com/MGHOty5.png';
 
document.getElementById('logo-imagem').firstChild.src= banner[Math.floor(Math.random()*banner.length)];
setInterval("document.getElementById('logo-imagem').firstChild.src= banner[Math.floor(Math.random()*banner.length)];",3000);

Até mais!


Logos aleatórios WpZJdpr
Bem-vindo(a) ao Fórum dos Fóruns Convidado!
Leia as Regras do Fórum dos Fóruns (FDF) e o Regulamento do setor de Suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum.
AquilesD.

AquilesD.
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 10/02/2012
Mensagens : 6039
Pontos Ativos : 7768

https://ajuda.forumeiros.com

Atendido / Resolvido Re: Logos aleatórios

Mensagem por BichodoMato em 04.06.19 13:27

@AquilesD. escreveu:Olá,

Substitua o JS pelo seguinte

Código:
var banner = new Array();
 
banner[0]='https://i.imgur.com/cYjl9Ay.png';
banner[1]='https://i.imgur.com/5UWkyS1.png';
banner[2]='https://i.imgur.com/MGHOty5.png';
 
document.getElementById('logo-imagem').firstChild.src= banner[Math.floor(Math.random()*banner.length)];
setInterval("document.getElementById('logo-imagem').firstChild.src= banner[Math.floor(Math.random()*banner.length)];",3000);

Até mais!

Olá @AquilesD, não resultou...
BichodoMato

BichodoMato
Usuário avançado

Masculino
Inscrito dia : 07/07/2013
Mensagens : 389
Pontos Ativos : 643

http://naruto-survival.forumeiros.com

Atendido / Resolvido Re: Logos aleatórios

Mensagem por BichodoMato em 07.06.19 0:45

#UP

Alguém pode ajudar?
BichodoMato

BichodoMato
Usuário avançado

Masculino
Inscrito dia : 07/07/2013
Mensagens : 389
Pontos Ativos : 643

http://naruto-survival.forumeiros.com
  • 0

Atendido / Resolvido Re: Logos aleatórios

Mensagem por Pedxz em 09.06.19 16:07

Altere o seu código para o seguinte:
Código:
/**
 * Banner Rotativo
 * 9 de Janeiro de 2019 by pedxz
 * https://ajuda.forumeiros.com/
 */
(function($) {
    'use strict';

    $(function() {

        var Img = [
                'https://i.servimg.com/u/f94/19/95/15/70/0510.png',
                'https://i.servimg.com/u/f94/19/95/15/70/dame10.png',
                'https://i.servimg.com/u/f94/19/95/15/70/hajime10.png',
                'https://i.servimg.com/u/f94/19/95/15/70/secret10.png',
                'https://i.servimg.com/u/f94/19/95/15/70/dairen10.png'
            ],
            $Class = $('.logo-imagem');

            $Class
                .css('background', 'url(' + Img[Math.floor(Math.random() * Img.length)] + ')');

    });
}(jQuery));
se o senhor quiser que a cada 5s o logo mude, use:
Código:
/**
 * Banner Rotativo
 * 9 de Janeiro de 2019 by pedxz
 * https://ajuda.forumeiros.com/
 */
(function($) {
    'use strict';

    $(function() {

        var Img = [
                'https://i.servimg.com/u/f94/19/95/15/70/0510.png',
                'https://i.servimg.com/u/f94/19/95/15/70/dame10.png',
                'https://i.servimg.com/u/f94/19/95/15/70/hajime10.png',
                'https://i.servimg.com/u/f94/19/95/15/70/secret10.png',
                'https://i.servimg.com/u/f94/19/95/15/70/dairen10.png'
            ],
            $Class = $('.logo-imagem');

        function randomImg() {
            $Class
                .css('background', 'url(' + Img[Math.floor(Math.random() * Img.length)] + ')');

        }

        setInterval(randomImg, 5000);
        randomImg();

    });
}(jQuery));
Pedxz

Pedxz
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 13/01/2017
Mensagens : 3069
Pontos Ativos : 3780

https://power-pixel.net

Atendido / Resolvido Re: Logos aleatórios

Mensagem por BichodoMato em 09.06.19 18:45

@Pedxz escreveu:Altere o seu código para o seguinte:
Código:
/**
 * Banner Rotativo
 * 9 de Janeiro de 2019 by pedxz
 * https://ajuda.forumeiros.com/
 */
(function($) {
    'use strict';

    $(function() {

        var Img = [
                'https://i.servimg.com/u/f94/19/95/15/70/0510.png',
                'https://i.servimg.com/u/f94/19/95/15/70/dame10.png',
                'https://i.servimg.com/u/f94/19/95/15/70/hajime10.png',
                'https://i.servimg.com/u/f94/19/95/15/70/secret10.png',
                'https://i.servimg.com/u/f94/19/95/15/70/dairen10.png'
            ],
            $Class = $('.logo-imagem');

            $Class
                .css('background', 'url(' + Img[Math.floor(Math.random() * Img.length)] + ')');

    });
}(jQuery));
se o senhor quiser que a cada 5s o logo mude, use:
Código:
/**
 * Banner Rotativo
 * 9 de Janeiro de 2019 by pedxz
 * https://ajuda.forumeiros.com/
 */
(function($) {
    'use strict';

    $(function() {

        var Img = [
                'https://i.servimg.com/u/f94/19/95/15/70/0510.png',
                'https://i.servimg.com/u/f94/19/95/15/70/dame10.png',
                'https://i.servimg.com/u/f94/19/95/15/70/hajime10.png',
                'https://i.servimg.com/u/f94/19/95/15/70/secret10.png',
                'https://i.servimg.com/u/f94/19/95/15/70/dairen10.png'
            ],
            $Class = $('.logo-imagem');

        function randomImg() {
            $Class
                .css('background', 'url(' + Img[Math.floor(Math.random() * Img.length)] + ')');

        }

        setInterval(randomImg, 5000);
        randomImg();

    });
}(jQuery));

Funcionou! Grande Pedxz!

Obrigado, pode fechar Muito feliz
BichodoMato

BichodoMato
Usuário avançado

Masculino
Inscrito dia : 07/07/2013
Mensagens : 389
Pontos Ativos : 643

http://naruto-survival.forumeiros.com

Atendido / Resolvido Re: Logos aleatórios

Mensagem por Pedxz em 10.06.19 0:18

Questão resolvida

Esta questão foi dada como resolvida pelo seu autor, e por esse motivo será marcada como resolvida e movida para o arquivo de questões resolvidas desta área.


Bem-vindo ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum.
Pedxz Moderadeiro
Pedxz

Pedxz
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 13/01/2017
Mensagens : 3069
Pontos Ativos : 3780

https://power-pixel.net

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo


Permissão deste fórum:
Você não pode responder aos tópicos neste fórum