[Dúvida] Logo Rotativo

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

Resolvido [Dúvida] Logo Rotativo

Mensagem por ZombieW em 22/08/14, 08:58 pm

Boa noite, 

Quero inserir um logo/banner rotativo em meu fórum e segui os passos desse guia: http://ajuda.forumeiros.com/t22323-tutorial-logo-rotativo

Portanto, o código da página HTML ficou:

Código:
var banner = new Array();
banner[0]='http://giant.gfycat.com/SelfreliantRequiredHarvestmouse.gif';
banner[1]='http://i57.tinypic.com/mrczkl.gif';
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)];",6000);

E o código da descrição do fórum ficou:

Código:
<script src=http://www.tutorialdoca.com/h23-banner-rotativo></script>O seu Database detalhado sobre o FPS Combat Arms Brasil.

Porém, não resultou na rotatividade, como proceder?


Última edição por ZombieW em 24/08/14, 06:10 pm, editado 1 vez(es)
avatar

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1273
Pontos Ativos : 1798

Ver perfil do usuário http://www.perfectteam.org

Resolvido Re: [Dúvida] Logo Rotativo

Mensagem por waghcwb em 23/08/14, 05:06 pm

Olá,

Fiz um código novo para o senhor, deve funcionar
Código:
window.addEventListener('DOMContentLoaded', function() {
    var urls = [
            'https://cdn0.iconfinder.com/data/icons/ballicons/128/coffee-128.png',
            'https://cdn0.iconfinder.com/data/icons/ballicons/128/chemistry-128.png',
            'https://cdn0.iconfinder.com/data/icons/ballicons/128/rocket-128.png',
            'https://cdn0.iconfinder.com/data/icons/ballicons/128/study_hat-128.png'
        ],
        random = function(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        },
        logo = urls.length;
    document.querySelector('#logo img').src = urls[random(0, logo)];
});


Esta vendo os links ali? Basta alterar para as URL's desejadas.

Para inserir novos basta inserir uma vírgula e entre aspas colocar o link do seu novo logo, note que o último logo não recebe uma vírgula.

Toda vez que atualizar o fórum terá um novo logo.

Até mais...
avatar

waghcwb
Usuário destaque

Masculino
Inscrito dia : 06/09/2012
Mensagens : 734
Pontos Ativos : 1097

Ver perfil do usuário http://punbb.forumeiros.com

Resolvido Re: [Dúvida] Logo Rotativo

Mensagem por ZombieW em 23/08/14, 06:09 pm

Na verdade, eu gostaria que o banner fosse alterado a cada 6000ms como o código acima mostra, e não a cada F5.
avatar

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1273
Pontos Ativos : 1798

Ver perfil do usuário http://www.perfectteam.org

Resolvido Re: [Dúvida] Logo Rotativo

Mensagem por waghcwb em 23/08/14, 06:15 pm

Altere para este:
Código:
window.addEventListener('DOMContentLoaded', function() {
    var urls = [
            'https://cdn0.iconfinder.com/data/icons/ballicons/128/coffee-128.png',
            'https://cdn0.iconfinder.com/data/icons/ballicons/128/chemistry-128.png',
            'https://cdn0.iconfinder.com/data/icons/ballicons/128/rocket-128.png',
            'https://cdn0.iconfinder.com/data/icons/ballicons/128/study_hat-128.png'
        ],
        random = function(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        },
        logo = urls.length;

    window.setInterval(function() {
        document.querySelector('#logo img').src = urls[random(0, logo)];
    }, 6000);

});

Até mais.
avatar

waghcwb
Usuário destaque

Masculino
Inscrito dia : 06/09/2012
Mensagens : 734
Pontos Ativos : 1097

Ver perfil do usuário http://punbb.forumeiros.com

Resolvido Re: [Dúvida] Logo Rotativo

Mensagem por ZombieW em 23/08/14, 06:43 pm

Não funciona. Está correto como está na descrição do site?

Código:
<script src=http://www.tutorialdoca.com/h23-banner-rotativo></script>O seu Database detalhado sobre o FPS Combat Arms Brasil.
avatar

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1273
Pontos Ativos : 1798

Ver perfil do usuário http://www.perfectteam.org

Resolvido Re: [Dúvida] Logo Rotativo

Mensagem por waghcwb em 23/08/14, 07:13 pm

Como eu disse, eu fiz um código novo. Por favor, remova qualquer código antigo e mantenha apenas o que lhe passei.
avatar

waghcwb
Usuário destaque

Masculino
Inscrito dia : 06/09/2012
Mensagens : 734
Pontos Ativos : 1097

Ver perfil do usuário http://punbb.forumeiros.com

Resolvido Re: [Dúvida] Logo Rotativo

Mensagem por ZombieW em 23/08/14, 07:56 pm

Poderia ter me informado que era um JS e não uma HTML, como eu havia dito.

Funcionou, porém, o fórum está bem pesado com isso, é normal?
avatar

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1273
Pontos Ativos : 1798

Ver perfil do usuário http://www.perfectteam.org

Resolvido Re: [Dúvida] Logo Rotativo

Mensagem por waghcwb em 23/08/14, 08:07 pm

Olha, em meus testes eu não notei nenhum atraso no carregamento do fórum, não seria o fato das imagens serem grandes ou coisa assim?

Note que o código é pequeno, e leve. Não acredito que isso seja causado por ele...
avatar

waghcwb
Usuário destaque

Masculino
Inscrito dia : 06/09/2012
Mensagens : 734
Pontos Ativos : 1097

Ver perfil do usuário http://punbb.forumeiros.com

Resolvido Re: [Dúvida] Logo Rotativo

Mensagem por ZombieW em 23/08/14, 09:24 pm

Ao trocar um banner pelo outro, o site "pisca", fazendo uma "travada" e as vezes fica sem banner, aparece essa imagem como se estivesse expirado:

avatar

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1273
Pontos Ativos : 1798

Ver perfil do usuário http://www.perfectteam.org

Resolvido Re: [Dúvida] Logo Rotativo

Mensagem por waghcwb em 23/08/14, 09:38 pm

Vou fazer um esquema mais caprichado para você aqui, pode me enviar a imagem de todos os banners para que possa realizar as modificações necessárias para o senhor?

Outra coisa, quero que me envie o código que está usando atualmente também, o que o senhor editou.

Até mais.
avatar

waghcwb
Usuário destaque

Masculino
Inscrito dia : 06/09/2012
Mensagens : 734
Pontos Ativos : 1097

Ver perfil do usuário http://punbb.forumeiros.com

Resolvido Re: [Dúvida] Logo Rotativo

Mensagem por ZombieW em 23/08/14, 09:52 pm

Código:
window.addEventListener('DOMContentLoaded', function() {
    var urls = [
            'http://giant.gfycat.com/SelfreliantRequiredHarvestmouse.gif',
            'http://s4.uploads.im/S8yN7.gif',
        ],
        random = function(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        },
        logo = urls.length;

    window.setInterval(function() {
        document.querySelector('#logo img').src = urls[random(0, logo)];
    }, 12000);
});
avatar

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1273
Pontos Ativos : 1798

Ver perfil do usuário http://www.perfectteam.org

Resolvido Re: [Dúvida] Logo Rotativo

Mensagem por waghcwb em 24/08/14, 10:32 am

Agora deve funcionar bem.

Fiz o script para checar se o logo está no viewport, ou seja se ele está visível na tela do usuário. Caso esteja, ele fica trocando como você deseja, do contrário ele não faz nada, assim evitamos cálculos desnecessários.

Volte na minha postagem la em cima e releia minha mensagem, veja:
@waghcwb escreveu:note que o último logo não recebe uma vírgula.

O senhor inseriu uma vírgula no último logo no código que me passou, fique atento a isso.

O problema de aparecer um logo inexistente foi resolvido, e em relação a performance acredito que também vai melhorar.

Queira testar o resultado por favor.

Código:
window.addEventListener('DOMContentLoaded', function() {
    var urls = [
            'http://giant.gfycat.com/SelfreliantRequiredHarvestmouse.gif',
            'http://s4.uploads.im/S8yN7.gif'
        ],
        pics = urls.length,
        logo = document.querySelector('#logo img');

    window.onscroll = function() {
        if (iv(logo) == false) return;
            window.setInterval(function() {
                logo.src = urls[randoms(0, pics - 1)];
            }, 1000);
    }
});

function iv(element) {
    var eap,
        rect = element.getBoundingClientRect(),
        doc = document.documentElement,
        vWidth = window.innerWidth || doc.clientWidth,
        vHeight = window.innerHeight || doc.clientHeight,
        fromPoint = function(x, y) {
            return document.elementFromPoint(x, y)
        },
        contains = "contains" in element ? "contains" : "compareDocumentPosition",
        has = contains == "contains" ? 1 : 0x14;

    if (rect.right < 0 || rect.bottom < 0 || rect.left > vWidth || rect.top > vHeight)
        return false;

    return (
        (eap = fromPoint(rect.left, rect.top)) == element || element[contains](eap) == has || (eap = fromPoint(rect.right, rect.top)) == element || element[contains](eap) == has || (eap = fromPoint(rect.right, rect.bottom)) == element || element[contains](eap) == has || (eap = fromPoint(rect.left, rect.bottom)) == element || element[contains](eap) == has
    );
};

function randoms(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
avatar

waghcwb
Usuário destaque

Masculino
Inscrito dia : 06/09/2012
Mensagens : 734
Pontos Ativos : 1097

Ver perfil do usuário http://punbb.forumeiros.com

Resolvido Re: [Dúvida] Logo Rotativo

Mensagem por ZombieW em 24/08/14, 01:45 pm

Olá amigo, copiei o último código passado por você e inseri no JS, não houve rotação nenhuma.


O fórum está fixo na 1ª imagem.
avatar

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1273
Pontos Ativos : 1798

Ver perfil do usuário http://www.perfectteam.org

Resolvido Re: [Dúvida] Logo Rotativo

Mensagem por waghcwb em 24/08/14, 02:04 pm

Então, agora o script só é ativado, quando acontece um scroll no mouse, para evitar cálculos a toa...

Se desejar eu coloco para iniciar automaticamente.

Ele está funcionando, mas está trocando bem rápido, não esqueça de modificar o tempo para o desejado.
avatar

waghcwb
Usuário destaque

Masculino
Inscrito dia : 06/09/2012
Mensagens : 734
Pontos Ativos : 1097

Ver perfil do usuário http://punbb.forumeiros.com

Resolvido Re: [Dúvida] Logo Rotativo

Mensagem por ZombieW em 24/08/14, 02:09 pm

Não tinha notado isso no scroll, mas acho meio inútil não? Eu vou rolar para baixo, ele vai trocar e depois eu não vou ver o banner...rs

Por favor, deixe para automático.
avatar

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1273
Pontos Ativos : 1798

Ver perfil do usuário http://www.perfectteam.org
  • 0

Resolvido Re: [Dúvida] Logo Rotativo

Mensagem por waghcwb em 24/08/14, 02:41 pm

Código:
window.addEventListener('DOMContentLoaded', function() {
    var urls = [
            'http://giant.gfycat.com/SelfreliantRequiredHarvestmouse.gif',
            'http://s4.uploads.im/S8yN7.gif'
        ],
        pics = urls.length,
        logo = document.querySelector('#logo img');

    if (iv(logo) == false) return;
    window.setInterval(function() {
        logo.src = urls[randoms(0, pics - 1)];
    }, 1000);
});

function iv(element) {
    var eap,
        rect = element.getBoundingClientRect(),
        doc = document.documentElement,
        vWidth = window.innerWidth || doc.clientWidth,
        vHeight = window.innerHeight || doc.clientHeight,
        fromPoint = function(x, y) {
            return document.elementFromPoint(x, y)
        },
        contains = "contains" in element ? "contains" : "compareDocumentPosition",
        has = contains == "contains" ? 1 : 0x14;

    if (rect.right < 0 || rect.bottom < 0 || rect.left > vWidth || rect.top > vHeight)
        return false;

    return (
        (eap = fromPoint(rect.left, rect.top)) == element || element[contains](eap) == has || (eap = fromPoint(rect.right, rect.top)) == element || element[contains](eap) == has || (eap = fromPoint(rect.right, rect.bottom)) == element || element[contains](eap) == has || (eap = fromPoint(rect.left, rect.bottom)) == element || element[contains](eap) == has
    );
};

function randoms(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
avatar

waghcwb
Usuário destaque

Masculino
Inscrito dia : 06/09/2012
Mensagens : 734
Pontos Ativos : 1097

Ver perfil do usuário http://punbb.forumeiros.com

Resolvido Re: [Dúvida] Logo Rotativo

Mensagem por ZombieW em 24/08/14, 04:11 pm

Não resultou, está fixo na 1ª imagem.

@Edit

Sim resultou, está correto agora. Peço desculpas por falar que não tinha ocorrido, não tinha de fato, demorou alguns minutos para funcionar.

Obrigado.
avatar

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1273
Pontos Ativos : 1798

Ver perfil do usuário http://www.perfectteam.org

Resolvido Re: [Dúvida] Logo Rotativo

Mensagem por Shek em 25/08/14, 07:40 pm

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.

Tópico marcado como Resolvido e movido para "Questões resolvidas".


Shek CrowleyAdmineiro - Fórum dos Fóruns

Clicar no botão ou no OBRIGADO não mata ninguém!
avatar

Shek
Admineiro
Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 17159
Pontos Ativos : 21417

Ver perfil do usuário http://www.shiftactif.com https://go.topicit.net/ZosT/61pMt1mPsG https://www.facebook.com/shek.crowley https://twitter.com/shek_forumactif

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

- Tópicos similares

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