[Dúvida] Logo Rotativo

3 participantes

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

Tópico resolvido [Dúvida] Logo Rotativo

Mensagem por ZombieW 23.08.14 0:58

Boa noite, 

Quero inserir um logo/banner rotativo em meu fórum e segui os passos desse guia: https://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 22:10, editado 1 vez(es)
ZombieW

ZombieW
Super Membro

Membro desde : 02/08/2010
Mensagens : 1452
Pontos : 2020

http://www.perfectteam.org

Ir para o topo Ir para baixo

Tópico resolvido Re: [Dúvida] Logo Rotativo

Mensagem por waghcwb 23.08.14 21:06

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

waghcwb
Membro

Membro desde : 07/09/2012
Mensagens : 734
Pontos : 1097

http://punbb.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: [Dúvida] Logo Rotativo

Mensagem por ZombieW 23.08.14 22:09

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

ZombieW
Super Membro

Membro desde : 02/08/2010
Mensagens : 1452
Pontos : 2020

http://www.perfectteam.org

Ir para o topo Ir para baixo

Tópico resolvido Re: [Dúvida] Logo Rotativo

Mensagem por waghcwb 23.08.14 22:15

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

waghcwb
Membro

Membro desde : 07/09/2012
Mensagens : 734
Pontos : 1097

http://punbb.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: [Dúvida] Logo Rotativo

Mensagem por ZombieW 23.08.14 22:43

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

ZombieW
Super Membro

Membro desde : 02/08/2010
Mensagens : 1452
Pontos : 2020

http://www.perfectteam.org

Ir para o topo Ir para baixo

Tópico resolvido Re: [Dúvida] Logo Rotativo

Mensagem por waghcwb 23.08.14 23:13

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

waghcwb
Membro

Membro desde : 07/09/2012
Mensagens : 734
Pontos : 1097

http://punbb.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: [Dúvida] Logo Rotativo

Mensagem por ZombieW 23.08.14 23:56

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

ZombieW
Super Membro

Membro desde : 02/08/2010
Mensagens : 1452
Pontos : 2020

http://www.perfectteam.org

Ir para o topo Ir para baixo

Tópico resolvido Re: [Dúvida] Logo Rotativo

Mensagem por waghcwb 24.08.14 0:07

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

waghcwb
Membro

Membro desde : 07/09/2012
Mensagens : 734
Pontos : 1097

http://punbb.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: [Dúvida] Logo Rotativo

Mensagem por ZombieW 24.08.14 1:24

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:

[Dúvida] Logo Rotativo Captur20
ZombieW

ZombieW
Super Membro

Membro desde : 02/08/2010
Mensagens : 1452
Pontos : 2020

http://www.perfectteam.org

Ir para o topo Ir para baixo

Tópico resolvido Re: [Dúvida] Logo Rotativo

Mensagem por waghcwb 24.08.14 1:38

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

waghcwb
Membro

Membro desde : 07/09/2012
Mensagens : 734
Pontos : 1097

http://punbb.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: [Dúvida] Logo Rotativo

Mensagem por ZombieW 24.08.14 1:52

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

ZombieW
Super Membro

Membro desde : 02/08/2010
Mensagens : 1452
Pontos : 2020

http://www.perfectteam.org

Ir para o topo Ir para baixo

Tópico resolvido Re: [Dúvida] Logo Rotativo

Mensagem por waghcwb 24.08.14 14:32

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

waghcwb
Membro

Membro desde : 07/09/2012
Mensagens : 734
Pontos : 1097

http://punbb.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: [Dúvida] Logo Rotativo

Mensagem por ZombieW 24.08.14 17:45

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

ZombieW
Super Membro

Membro desde : 02/08/2010
Mensagens : 1452
Pontos : 2020

http://www.perfectteam.org

Ir para o topo Ir para baixo

Tópico resolvido Re: [Dúvida] Logo Rotativo

Mensagem por waghcwb 24.08.14 18:04

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

waghcwb
Membro

Membro desde : 07/09/2012
Mensagens : 734
Pontos : 1097

http://punbb.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: [Dúvida] Logo Rotativo

Mensagem por ZombieW 24.08.14 18:09

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

ZombieW
Super Membro

Membro desde : 02/08/2010
Mensagens : 1452
Pontos : 2020

http://www.perfectteam.org

Ir para o topo Ir para baixo

  • 0

Tópico resolvido Re: [Dúvida] Logo Rotativo

Mensagem por waghcwb 24.08.14 18:41

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

waghcwb
Membro

Membro desde : 07/09/2012
Mensagens : 734
Pontos : 1097

http://punbb.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: [Dúvida] Logo Rotativo

Mensagem por ZombieW 24.08.14 20:11

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

ZombieW
Super Membro

Membro desde : 02/08/2010
Mensagens : 1452
Pontos : 2020

http://www.perfectteam.org

Ir para o topo Ir para baixo

Principal Contribuidor

Tópico resolvido Re: [Dúvida] Logo Rotativo

Mensagem por Shek 25.08.14 23:40

[Dúvida] Logo Rotativo Symbol10 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

Shek
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 18896
Pontos : 22793

https://shiftactive.blogspot.com/ https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos