Logos aleatórios

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;
}

Olá,

Confira o tutorial abaixo

[TUTORIAL] Logo Aleatório

Título alterado para "Logos aleatórios"

Até mais!

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 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.

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.

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.

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.

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!

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...

#UP

Alguém pode ajudar?

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 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