Logo rotativo

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

Atendido / Resolvido Logo rotativo

Mensagem por Mahal Dramas Fansub em 09.01.19 3:00

Detalhes da questão


Endereço do fórum: http://mahaldramasfansub.forumeiros.com/
Versão do fórum: phpBB2

Descrição


Eu segui o tutorial do Solkis para criar um logo rotativo (Link do tutorial: https://ajuda.forumeiros.com/t22323-tutorial-logo-rotativo)... Deu certo fazendo um JavaScript ao invés de HTML (que não deu certo aqui para mim), só que as imagens repetem quando na verdade não era para ser ela.

O código que usei:

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

banner[0]='https://i.servimg.com/u/f94/19/95/15/70/0510.png';
banner[1]='https://i.servimg.com/u/f94/19/95/15/70/dairen10.png';
banner[2]='https://i.servimg.com/u/f94/19/95/15/70/dame10.png';
banner[3]='https://i.servimg.com/u/f94/19/95/15/70/family10.png';
banner[4]='https://i.servimg.com/u/f94/19/95/15/70/hajime10.png';
banner[5]='https://i.servimg.com/u/f94/19/95/15/70/secret10.png';

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

Já vi outros tópicos aqui, porém nenhum conseguiu resolver meu problema. Agradeço se alguém puder me ajudar
Mahal Dramas Fansub

Mahal Dramas Fansub
Nível 2

Feminino
Inscrito dia : 08/01/2019
Mensagens : 6
Pontos Ativos : 8

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

Atendido / Resolvido Re: Logo rotativo

Mensagem por Pedxz em 09.01.19 12:28

Olá @Mahal Dramas Fansub,

Bem-vinda ao Fórum dos Fóruns!

Seja bem-vinda ao Fórum dos Fóruns! Como acabou de se inscrever, veja aqui alguns links importantes a saber:

Atualize o código para o seguinte:
Código:
/**
 * Banner Rotativo - phpBB2
 * 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 = $('#i_logo');

 function randomImg() {
 $Class
 .attr('src', Img[Math.floor(Math.random() * Img.length)]);

 }

 setInterval(randomImg, 5000);
 randomImg();

 });
}(jQuery));
Relativamente a sua questão não percebi qual o erro apresentado! Exponha melhor a sua questão, por favor Feliz


Aguardo uma resposta sua,
pedxz.
Pedxz

Pedxz
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 13/01/2017
Mensagens : 2804
Pontos Ativos : 3557

Ver perfil do usuário https://pedxz.forumeiros.com

Atendido / Resolvido Re: Logo rotativo

Mensagem por Mahal Dramas Fansub em 09.01.19 12:37

@Pedxz escreveu:Olá @"Mahal Dramas Fansub",

Bem-vinda ao Fórum dos Fóruns!



Seja bem-vinda ao Fórum dos Fóruns! Como acabou de se inscrever, veja aqui alguns links importantes a saber:


Atualize o código para o seguinte:
Código:
/**
 * Banner Rotativo - phpBB2
 * 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 = $('#i_logo');

 function randomImg() {
 $Class
 .attr('src', Img[Math.floor(Math.random() * Img.length)]);

 }

 setInterval(randomImg, 5000);
 randomImg();

 });
}(jQuery));
Relativamente a sua questão não percebi qual o erro apresentado! Exponha melhor a sua questão, por favor  Feliz


Aguardo uma resposta sua,
pedxz.



Tenho 5 imagens diferentes... Era para mostrar uma de cada vez, seguindo a ordem das imagens que coloquei... Porém como pode observar no meu fórum, repete imagem na ordem errada... Exemplo:

Começa com a foto 01, depois vai para a foto 02, mas dai repete a foto 01 de novo ao invés de ir para a foto 03

Vou tentar com esse código que vc me passou ^^ Obrigada
Mahal Dramas Fansub

Mahal Dramas Fansub
Nível 2

Feminino
Inscrito dia : 08/01/2019
Mensagens : 6
Pontos Ativos : 8

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

Atendido / Resolvido Re: Logo rotativo

Mensagem por Pedxz em 09.01.19 14:01

O Fórum que o Senhor demostrou usa como código o seguinte:
Código:
(function() {
  var BannerRotator = {
    images : [
      'http://i21.servimg.com/u/f21/18/21/60/73/free10.png',
      'http://i21.servimg.com/u/f21/18/21/60/73/logo10.png'
    ],
 
    start_delay : 5000,
    duration : 5000,
    height : 'auto',
 
    fade_image : true,
    fade_speed : 1200,
 
    keep_initial : true,
    remember_position : true,
    preload : true,
 
    // technical data below
    index : -1,
    logo : null,
 
    // increment the index and display the next image in rotation after a small delay
    next : function(ms) {
      if (ms === undefined) ms = FA.BannerRotator.duration;
 
      window.setTimeout(function() {
        if (++FA.BannerRotator.index >= FA.BannerRotator.images.length) FA.BannerRotator.index = 0; // reset index when it exceeds "images" length
        if (FA.BannerRotator.remember_position) my_setcookie('fa_banner_index', FA.BannerRotator.index); // remember the last banner shown
     
        // fade banner in and out
        if (FA.BannerRotator.fade_image) {
          $(FA.BannerRotator.logo).fadeOut(FA.BannerRotator.fade_speed, function() {
            FA.BannerRotator.logo.src = FA.BannerRotator.images[FA.BannerRotator.index]; // set next banner
            $(this).fadeIn(FA.BannerRotator.fade_speed, FA.BannerRotator.next); // fade it in
          });
        }
 
        // default rotation
        else {
          FA.BannerRotator.logo.src = FA.BannerRotator.images[FA.BannerRotator.index];
          FA.BannerRotator.next();
        }
      }, ms);
    },
 
    // initial start up to get the correct logo node and setup some other settings
    init : function() {
      var logo = document.getElementById('i_logo') || document.getElementById('logo') || document.getElementById('pun-logo'),
          index = my_getcookie('fa_banner_index');
       
      if (logo) {
        FA.BannerRotator.logo = logo.tagName == 'IMG' ? logo : logo.firstChild;
        FA.BannerRotator.logo.style.height = FA.BannerRotator.height;
     
        if (FA.BannerRotator.keep_initial) FA.BannerRotator.images[FA.BannerRotator.images.length] = FA.BannerRotator.logo.src;
        if (FA.BannerRotator.remember_position && index) {
          FA.BannerRotator.index = +index;
          FA.BannerRotator.logo.src = FA.BannerRotator.images[FA.BannerRotator.index] || FA.BannerRotator.images[0];
        }
     
        FA.BannerRotator.next(FA.BannerRotator.start_delay);
      } else if (window.console && window.console.warn) {
        console.warn('Your forum version is not optimized for this plugin');
      }
    }
  };
 
  if (!window.FA) FA = {};
  if (!FA.BannerRotator) {
    FA.BannerRotator = BannerRotator;
 
    if (FA.BannerRotator.preload) {
      for (var i = 0, j = FA.BannerRotator.images.length, img; i < j; i++) {
        img = document.createElement('IMG');
        img.src = FA.BannerRotator.images[i];
      }
    }
 
    $(FA.BannerRotator.init);
  }
}());
O Senhor terá que adicionar somente às imagens, qualquer dúvida relate neste tópico!
Pedxz

Pedxz
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 13/01/2017
Mensagens : 2804
Pontos Ativos : 3557

Ver perfil do usuário https://pedxz.forumeiros.com

Atendido / Resolvido Re: Logo rotativo

Mensagem por Mahal Dramas Fansub em 09.01.19 14:47

Nossa não sei nem como te agradecer, deu certo... obrigadaaaaaa Eu amo você
Mahal Dramas Fansub

Mahal Dramas Fansub
Nível 2

Feminino
Inscrito dia : 08/01/2019
Mensagens : 6
Pontos Ativos : 8

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

Atendido / Resolvido Re: Logo rotativo

Mensagem por Pedxz em 09.01.19 15:18

Tópico resolvido


Movido para "Questões resolvidas".
Pedxz

Pedxz
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 13/01/2017
Mensagens : 2804
Pontos Ativos : 3557

Ver perfil do usuário https://pedxz.forumeiros.com

Atendido / Resolvido Re: Logo rotativo

Mensagem por Pedxz em 10.01.19 17:35

Olá @Mahal Dramas Fansub,

Tópico reaberto


O tópico, inicialmente dado como resolvido pelo autor foi reaberto a pedido do mesmo.


Cordialmente,
pedxz.
Pedxz

Pedxz
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 13/01/2017
Mensagens : 2804
Pontos Ativos : 3557

Ver perfil do usuário https://pedxz.forumeiros.com

Atendido / Resolvido Re: Logo rotativo

Mensagem por Pedxz em 10.01.19 17:40

Só preciso que a Senhora passe-me o código que atualmente usa, para que seja mais fácil a adição nas imagens! Use a tag code!
Pedxz

Pedxz
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 13/01/2017
Mensagens : 2804
Pontos Ativos : 3557

Ver perfil do usuário https://pedxz.forumeiros.com

Atendido / Resolvido Re: Logo rotativo

Mensagem por Mahal Dramas Fansub em 10.01.19 17:42

Código:
(function() {
  var BannerRotator = {
    images : [
      'https://i.servimg.com/u/f94/19/95/15/70/0510.png',
'https://i.servimg.com/u/f94/19/95/15/70/dairen10.png',
'https://i.servimg.com/u/f94/19/95/15/70/dame10.png',
'https://i.servimg.com/u/f94/19/95/15/70/family10.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'
    ],
 
    start_delay : 3000,
    duration : 3000,
    height : 'auto',
 
    fade_image : false,
    fade_speed : 1200,
 
    keep_initial : false,
    remember_position : true,
    preload : true,
 
    // technical data below
    index : -1,
    logo : null,
 
    // increment the index and display the next image in rotation after a small delay
    next : function(ms) {
      if (ms === undefined) ms = FA.BannerRotator.duration;
 
      window.setTimeout(function() {
        if (++FA.BannerRotator.index >= FA.BannerRotator.images.length) FA.BannerRotator.index = 0; // reset index when it exceeds "images" length
        if (FA.BannerRotator.remember_position) my_setcookie('fa_banner_index', FA.BannerRotator.index); // remember the last banner shown
   
        // fade banner in and out
        if (FA.BannerRotator.fade_image) {
          $(FA.BannerRotator.logo).fadeOut(FA.BannerRotator.fade_speed, function() {
            FA.BannerRotator.logo.src = FA.BannerRotator.images[FA.BannerRotator.index]; // set next banner
            $(this).fadeIn(FA.BannerRotator.fade_speed, FA.BannerRotator.next); // fade it in
          });
        }
 
        // default rotation
        else {
          FA.BannerRotator.logo.src = FA.BannerRotator.images[FA.BannerRotator.index];
          FA.BannerRotator.next();
        }
      }, ms);
    },
 
    // initial start up to get the correct logo node and setup some other settings
    init : function() {
      var logo = document.getElementById('i_logo') || document.getElementById('logo') || document.getElementById('pun-logo'),
          index = my_getcookie('fa_banner_index');
     
      if (logo) {
        FA.BannerRotator.logo = logo.tagName == 'IMG' ? logo : logo.firstChild;
        FA.BannerRotator.logo.style.height = FA.BannerRotator.height;
   
        if (FA.BannerRotator.keep_initial) FA.BannerRotator.images[FA.BannerRotator.images.length] = FA.BannerRotator.logo.src;
        if (FA.BannerRotator.remember_position && index) {
          FA.BannerRotator.index = +index;
          FA.BannerRotator.logo.src = FA.BannerRotator.images[FA.BannerRotator.index] || FA.BannerRotator.images[0];
        }
   
        FA.BannerRotator.next(FA.BannerRotator.start_delay);
      } else if (window.console && window.console.warn) {
        console.warn('Your forum version is not optimized for this plugin');
      }
    }
  };
 
  if (!window.FA) FA = {};
  if (!FA.BannerRotator) {
    FA.BannerRotator = BannerRotator;
 
    if (FA.BannerRotator.preload) {
      for (var i = 0, j = FA.BannerRotator.images.length, img; i < j; i++) {
        img = document.createElement('IMG');
        img.src = FA.BannerRotator.images[i];
      }
    }
 
    $(FA.BannerRotator.init);
  }
}());



















<script src=http://mahaldramasfansub.forumeiros.com/10114.js></script>
Mahal Dramas Fansub

Mahal Dramas Fansub
Nível 2

Feminino
Inscrito dia : 08/01/2019
Mensagens : 6
Pontos Ativos : 8

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

Atendido / Resolvido Re: Logo rotativo

Mensagem por Pedxz em 10.01.19 17:50

Troque o seu código para:
Código:
(function() {
  var BannerRotator = {
    images : [
      'https://i.servimg.com/u/f94/19/95/15/70/0510.png',
'https://i.servimg.com/u/f94/19/95/15/70/dairen10.png',
'https://i.servimg.com/u/f94/19/95/15/70/dame10.png',
'https://i.servimg.com/u/f94/19/95/15/70/family10.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',
'http://ap.imagensbrasil.org/images/2019/01/10/DaiRenai.png',
'http://ap.imagensbrasil.org/images/2019/01/10/Family.png',
'http://ap.imagensbrasil.org/images/2019/01/10/Dame.png',
'http://ap.imagensbrasil.org/images/2019/01/10/GIVER.png',
'http://ap.imagensbrasil.org/images/2019/01/10/Kanna-san.png',
'http://ap.imagensbrasil.org/images/2019/01/10/Secret.png',
'http://ap.imagensbrasil.org/images/2019/01/10/Love-Rerun.png',
'http://ap.imagensbrasil.org/images/2019/01/10/The-Hows-of-Us.png',
'http://ap.imagensbrasil.org/images/2019/01/10/Prince-of-Legend.png',
'http://ap.imagensbrasil.org/images/2019/01/10/Hajimete.png',
'http://ap.imagensbrasil.org/images/2019/01/10/Trace-Kasouken-no-Otoko.png',
'http://ap.imagensbrasil.org/images/2019/01/10/This-Time.png'
    ],
 
    start_delay : 3000,
    duration : 3000,
    height : 'auto',
 
    fade_image : false,
    fade_speed : 1200,
 
    keep_initial : false,
    remember_position : true,
    preload : true,
 
    // technical data below
    index : -1,
    logo : null,
 
    // increment the index and display the next image in rotation after a small delay
    next : function(ms) {
      if (ms === undefined) ms = FA.BannerRotator.duration;
 
      window.setTimeout(function() {
        if (++FA.BannerRotator.index >= FA.BannerRotator.images.length) FA.BannerRotator.index = 0; // reset index when it exceeds "images" length
        if (FA.BannerRotator.remember_position) my_setcookie('fa_banner_index', FA.BannerRotator.index); // remember the last banner shown
 
        // fade banner in and out
        if (FA.BannerRotator.fade_image) {
          $(FA.BannerRotator.logo).fadeOut(FA.BannerRotator.fade_speed, function() {
            FA.BannerRotator.logo.src = FA.BannerRotator.images[FA.BannerRotator.index]; // set next banner
            $(this).fadeIn(FA.BannerRotator.fade_speed, FA.BannerRotator.next); // fade it in
          });
        }
 
        // default rotation
        else {
          FA.BannerRotator.logo.src = FA.BannerRotator.images[FA.BannerRotator.index];
          FA.BannerRotator.next();
        }
      }, ms);
    },
 
    // initial start up to get the correct logo node and setup some other settings
    init : function() {
      var logo = document.getElementById('i_logo') || document.getElementById('logo') || document.getElementById('pun-logo'),
          index = my_getcookie('fa_banner_index');
   
      if (logo) {
        FA.BannerRotator.logo = logo.tagName == 'IMG' ? logo : logo.firstChild;
        FA.BannerRotator.logo.style.height = FA.BannerRotator.height;
 
        if (FA.BannerRotator.keep_initial) FA.BannerRotator.images[FA.BannerRotator.images.length] = FA.BannerRotator.logo.src;
        if (FA.BannerRotator.remember_position && index) {
          FA.BannerRotator.index = +index;
          FA.BannerRotator.logo.src = FA.BannerRotator.images[FA.BannerRotator.index] || FA.BannerRotator.images[0];
        }
 
        FA.BannerRotator.next(FA.BannerRotator.start_delay);
      } else if (window.console && window.console.warn) {
        console.warn('Your forum version is not optimized for this plugin');
      }
    }
  };
 
  if (!window.FA) FA = {};
  if (!FA.BannerRotator) {
    FA.BannerRotator = BannerRotator;
 
    if (FA.BannerRotator.preload) {
      for (var i = 0, j = FA.BannerRotator.images.length, img; i < j; i++) {
        img = document.createElement('IMG');
        img.src = FA.BannerRotator.images[i];
      }
    }
 
    $(FA.BannerRotator.init);
  }
}());
Pedxz

Pedxz
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 13/01/2017
Mensagens : 2804
Pontos Ativos : 3557

Ver perfil do usuário https://pedxz.forumeiros.com

Atendido / Resolvido Re: Logo rotativo

Mensagem por Mahal Dramas Fansub em 10.01.19 18:18

@Pedxz escreveu:Troque o seu código para:
Código:
(function() {
  var BannerRotator = {
    images : [
      'https://i.servimg.com/u/f94/19/95/15/70/0510.png',
'https://i.servimg.com/u/f94/19/95/15/70/dairen10.png',
'https://i.servimg.com/u/f94/19/95/15/70/dame10.png',
'https://i.servimg.com/u/f94/19/95/15/70/family10.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',
'http://ap.imagensbrasil.org/images/2019/01/10/DaiRenai.png',
'http://ap.imagensbrasil.org/images/2019/01/10/Family.png',
'http://ap.imagensbrasil.org/images/2019/01/10/Dame.png',
'http://ap.imagensbrasil.org/images/2019/01/10/GIVER.png',
'http://ap.imagensbrasil.org/images/2019/01/10/Kanna-san.png',
'http://ap.imagensbrasil.org/images/2019/01/10/Secret.png',
'http://ap.imagensbrasil.org/images/2019/01/10/Love-Rerun.png',
'http://ap.imagensbrasil.org/images/2019/01/10/The-Hows-of-Us.png',
'http://ap.imagensbrasil.org/images/2019/01/10/Prince-of-Legend.png',
'http://ap.imagensbrasil.org/images/2019/01/10/Hajimete.png',
'http://ap.imagensbrasil.org/images/2019/01/10/Trace-Kasouken-no-Otoko.png',
'http://ap.imagensbrasil.org/images/2019/01/10/This-Time.png'
    ],
 
    start_delay : 3000,
    duration : 3000,
    height : 'auto',
 
    fade_image : false,
    fade_speed : 1200,
 
    keep_initial : false,
    remember_position : true,
    preload : true,
 
    // technical data below
    index : -1,
    logo : null,
 
    // increment the index and display the next image in rotation after a small delay
    next : function(ms) {
      if (ms === undefined) ms = FA.BannerRotator.duration;
 
      window.setTimeout(function() {
        if (++FA.BannerRotator.index >= FA.BannerRotator.images.length) FA.BannerRotator.index = 0; // reset index when it exceeds "images" length
        if (FA.BannerRotator.remember_position) my_setcookie('fa_banner_index', FA.BannerRotator.index); // remember the last banner shown
  
        // fade banner in and out
        if (FA.BannerRotator.fade_image) {
          $(FA.BannerRotator.logo).fadeOut(FA.BannerRotator.fade_speed, function() {
            FA.BannerRotator.logo.src = FA.BannerRotator.images[FA.BannerRotator.index]; // set next banner
            $(this).fadeIn(FA.BannerRotator.fade_speed, FA.BannerRotator.next); // fade it in
          });
        }
 
        // default rotation
        else {
          FA.BannerRotator.logo.src = FA.BannerRotator.images[FA.BannerRotator.index];
          FA.BannerRotator.next();
        }
      }, ms);
    },
 
    // initial start up to get the correct logo node and setup some other settings
    init : function() {
      var logo = document.getElementById('i_logo') || document.getElementById('logo') || document.getElementById('pun-logo'),
          index = my_getcookie('fa_banner_index');
    
      if (logo) {
        FA.BannerRotator.logo = logo.tagName == 'IMG' ? logo : logo.firstChild;
        FA.BannerRotator.logo.style.height = FA.BannerRotator.height;
  
        if (FA.BannerRotator.keep_initial) FA.BannerRotator.images[FA.BannerRotator.images.length] = FA.BannerRotator.logo.src;
        if (FA.BannerRotator.remember_position && index) {
          FA.BannerRotator.index = +index;
          FA.BannerRotator.logo.src = FA.BannerRotator.images[FA.BannerRotator.index] || FA.BannerRotator.images[0];
        }
  
        FA.BannerRotator.next(FA.BannerRotator.start_delay);
      } else if (window.console && window.console.warn) {
        console.warn('Your forum version is not optimized for this plugin');
      }
    }
  };
 
  if (!window.FA) FA = {};
  if (!FA.BannerRotator) {
    FA.BannerRotator = BannerRotator;
 
    if (FA.BannerRotator.preload) {
      for (var i = 0, j = FA.BannerRotator.images.length, img; i < j; i++) {
        img = document.createElement('IMG');
        img.src = FA.BannerRotator.images[i];
      }
    }
 
    $(FA.BannerRotator.init);
  }
}());

Muito obrigada, me salvou mais uma vez. Deu certo ^^
Mahal Dramas Fansub

Mahal Dramas Fansub
Nível 2

Feminino
Inscrito dia : 08/01/2019
Mensagens : 6
Pontos Ativos : 8

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

Atendido / Resolvido Re: Logo rotativo

Mensagem por Pedxz em 10.01.19 18:24

De nada Muito feliz

Tópico resolvido


Movido para "Questões resolvidas".
Pedxz

Pedxz
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 13/01/2017
Mensagens : 2804
Pontos Ativos : 3557

Ver perfil do usuário https://pedxz.forumeiros.com

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