Logo rotativo
2 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre códigos Javascript e jQuery
Página 1 de 1 • Compartilhe
Logo rotativo
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
Re: Logo rotativo
Olá @Mahal Dramas Fansub,
Atualize o código para o seguinte:
Aguardo uma resposta sua,
pedxz.
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:
|
- 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));
Aguardo uma resposta sua,
pedxz.
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7964
Pontos : 9219
Re: Logo rotativo
Pedxz escreveu:Olá @"Mahal Dramas Fansub",Atualize o código para o seguinte:
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:
- Regras do Fórum, e o que você não deve fazer neste fórum;
- Lista de tutoriais e perguntas frequentes;
- A Equipe de Suporte;
- A função de busca.
Relativamente a sua questão não percebi qual o erro apresentado! Exponha melhor a sua questão, por favor
- 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));
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
Re: Logo rotativo
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);
}
}());
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7964
Pontos : 9219
Re: Logo rotativo
Nossa não sei nem como te agradecer, deu certo... obrigadaaaaaa
Re: Logo rotativo
Tópico resolvidoMovido para "Questões resolvidas". |
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7964
Pontos : 9219
Re: Logo rotativo
Olá @Mahal Dramas Fansub,
Cordialmente,
pedxz.
Tópico reabertoO tópico, inicialmente dado como resolvido pelo autor foi reaberto a pedido do mesmo. |
Cordialmente,
pedxz.
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7964
Pontos : 9219
Re: Logo rotativo
Com o código que me enviou por último, eu consegui colocar 6 fotos no logo, porém queria colocar 12 fotos, você sabe se teria como?
As imagens seriam essas:
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
No outro fórum que te mandei o link, eles usam 8 fotos, por isso queria saber se tem como ser 12
As imagens seriam essas:
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
No outro fórum que te mandei o link, eles usam 8 fotos, por isso queria saber se tem como ser 12
Re: Logo rotativo
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!
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7964
Pontos : 9219
Re: Logo rotativo
- 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>
Re: Logo rotativo
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);
}
}());
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7964
Pontos : 9219
Re: Logo rotativo
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 ^^
Re: Logo rotativo
De nada
Tópico resolvidoMovido para "Questões resolvidas". |
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7964
Pontos : 9219
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre códigos Javascript e jQuery
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos