Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá pessoal. O banner abaixo está funcionando normalmente, mas a transição entre uma imagem e outra está um tanto truculenta. Quero deixar suave. Como resolver isso? Obrigado !
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>transition suave entre uma image e outra</title>
<style>
#banner {
width: 240px;
height: 480px;
overflow: hidden;
position: relative;
}
#bannerGG {
width: 100%;
height: auto;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 1s ease-in-out;
}/*
#tete:active {
opacity: 1;
} */
</style>
</head>
<body>
<div id="banner">
<img class="bannerGG" src="imagem1.png" alt="Image 1">
<img class="bannerGG" src="imagem2.png" alt="Image 2">
<img class="bannerGG" src="imagem3.png" alt="Image 3">
<img class="bannerGG" src="imagem4.png" alt="Image 4">
<img class="bannerGG" src="imagem5.png" alt="Image 5">
</div>
<script>
const image = document.querySelectorAll('.bannerGG');
const banner = document.getElementById('banner');
function showRandomImage() {
const randomIndex = Math.floor(Math.random() * image.length);
const randomImage = image[randomIndex];
const imgElement = document.createElement('img');
imgElement.src = randomImage.src;
const linkElement = document.createElement('a');
linkElement.appendChild(imgElement);
banner.innerHTML = '';
banner.appendChild(linkElement);
}
showRandomImage();
setInterval(showRandomImage, 3000);
</script>
</body>
</html>>
12 horas atrás, Williams Duarte disse:
No seu CSS
#banner {
width: 240px;
height: 480px;
overflow: hidden;
position: relative;
}
.banner-link {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition: opacity 1s ease-in-out;
} width: 100%;
height: auto;
}
No seu JavaScript:
*Lembre-se de que a lógica de criação de novos elementos **img** e **a** foi removida, pois ela substituiria todo o conteúdo do banner, o que poderia interferir nas transições suaves. As imagens agora são controladas apenas por suas classes CSS. *
const links = document.querySelectorAll('.banner-link'); // Seleciona todos os links
let currentIndex = 0; // Começa na primeira imagem// Inicialize todos os links como ocultos, exceto o primeiro
links.forEach((link, index) => {
if (index !== 0) {
link.style.opacity = 0;
link.style.zIndex = 1;
link.style.position = 'absolute'; // Garante que todos os links usem o mesmo espaço
} else {
link.style.opacity = 1;
link.style.zIndex = 2;
link.style.position = 'relative';
}
});
function showRandomImage() {
// Esconde o link (e a imagem dentro dele) atual
links[currentIndex].style.opacity = 0;
links[currentIndex].style.zIndex = 1;
// Seleciona um novo link (e imagem) aleatório diferente do atual
let randomIndex;
do {
randomIndex = Math.floor(Math.random() * links.length);
} while (randomIndex === currentIndex);
// Mostra o novo link (e imagem)
links[randomIndex].style.opacity = 1;
links[randomIndex].style.zIndex = 2;
// Atualiza o índice do link (e imagem) atual
currentIndex = randomIndex;
}showRandomImage(); // Mostra a primeira imagem
setInterval(showRandomImage, 3000); // Altera a imagem a cada 3 segundos
No HTML, você pode colocar cada imagem dentro de um elemento de link:
<div id="banner">
<a href="https://example.com/link1" class="banner-link" style="opacity: 1; z-index: 2;"><img src="https://via.placeholder.com/240x480?text=Image+1" alt="Image 1"></a>
<a href="https://example.com/link2" class="banner-link" style="opacity: 0; z-index: 1;"><img src="https://via.placeholder.com/240x480?text=Image+2" alt="Image 2"></a>
<a href="https://example.com/link3" class="banner-link" style="opacity: 0; z-index: 1;"><img src="https://via.placeholder.com/240x480?text=Image+3" alt="Image 3"></a>
<!-- Adicione mais imagens conforme necessário -->
</div>
Código HTML Completo:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transition Suave entre Imagens</title>
<style>
#banner {
width: 240px;
height: 480px;
overflow: hidden;
position: relative;
}
.banner-link {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition: opacity 1s ease-in-out;
}
.banner-link img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<div id="banner">
<a href="https://example.com/link1" class="banner-link" style="opacity: 1; z-index: 2;"><img src="https://via.placeholder.com/240x480?text=Image+1" alt="Image 1"></a>
<a href="https://example.com/link2" class="banner-link" style="opacity: 0; z-index: 1;"><img src="https://via.placeholder.com/240x480?text=Image+2" alt="Image 2"></a>
<a href="https://example.com/link3" class="banner-link" style="opacity: 0; z-index: 1;"><img src="https://via.placeholder.com/240x480?text=Image+3" alt="Image 3"></a>
<!-- Adicione mais imagens conforme necessário -->
</div>
<script>
const links = document.querySelectorAll('.banner-link'); // Seleciona todos os links
let currentIndex = 0; // Começa na primeira imagem
// Inicialize todos os links como ocultos, exceto o primeiro
links.forEach((link, index) => {
if (index !== 0) {
link.style.opacity = 0;
link.style.zIndex = 1;
link.style.position = 'absolute'; // Garante que todos os links usem o mesmo espaço
} else {
link.style.opacity = 1;
link.style.zIndex = 2;
link.style.position = 'relative';
}
});
function showRandomImage() {
// Esconde o link (e a imagem dentro dele) atual
links[currentIndex].style.opacity = 0;
links[currentIndex].style.zIndex = 1;
// Seleciona um novo link (e imagem) aleatório diferente do atual
let randomIndex;
do {
randomIndex = Math.floor(Math.random() * links.length);
} while (randomIndex === currentIndex);
// Mostra o novo link (e imagem)
links[randomIndex].style.opacity = 1;
links[randomIndex].style.zIndex = 2;
// Atualiza o índice do link (e imagem) atual
currentIndex = randomIndex;
}
showRandomImage(); // Mostra a primeira imagem
setInterval(showRandomImage, 3000); // Altera a imagem a cada 3 segundos
</script>
</body>
</html>
Se o cursor ficar parado sobre o banner o link não muda. O ideal é se o link mudasse junto com o banner. Outro detalhe é style no html o que me gera outras complicações. É melhor que o efeito suave venha do css.Corrigido, peço que, para futuras consultas, evite abrir múltiplos tópicos sobre o mesmo assunto, senão consegue resolver aguarde um pouco. Isso nos ajudará a manter o fórum organizado e a garantir que cada questão receba a atenção adequada.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transição Suave entre Imagens</title>
<style>
#banner {
width: 240px;
height: 480px;
overflow: hidden;
position: relative;
}
.banner-link {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition: opacity 1s ease-in-out;
opacity: 0;
z-index: 1; /* Todos começam no fundo */
}
.banner-link.active {
opacity: 1;
z-index: 2; /* Somente o ativo fica no topo */
}
.banner-link img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<div id="banner">
<a href="https://example.com/link1" class="banner-link active"><img src="https://via.placeholder.com/240x480?text=Image+1" alt="Image 1"></a>
<a href="https://example.com/link2" class="banner-link"><img src="https://via.placeholder.com/240x480?text=Image+2" alt="Image 2"></a>
<a href="https://example.com/link3" class="banner-link"><img src="https://via.placeholder.com/240x480?text=Image+3" alt="Image 3"></a>
<!-- Adicione mais imagens conforme necessário -->
</div>
<script>
const banner = document.getElementById('banner');
const links = document.querySelectorAll('.banner-link'); // Seleciona todos os links
let currentIndex = 0; // Começa na primeira imagem
function showRandomImage() {
// Esconde o link (e a imagem dentro dele) atual
links[currentIndex].classList.remove('active');
// Seleciona um novo link (e imagem) aleatório diferente do atual
let randomIndex;
do {
randomIndex = Math.floor(Math.random() * links.length);
} while (randomIndex === currentIndex);
// Mostra o novo link (e imagem)
links[randomIndex].classList.add('active');
// Atualiza o índice do link (e imagem) atual
currentIndex = randomIndex;
}
showRandomImage(); // Mostra a primeira imagem
let intervalId = setInterval(showRandomImage, 3000); // Altera a imagem a cada 3 segundos
// Pausar o intervalo quando o mouse está sobre o banner
banner.addEventListener('mouseover', () => {
clearInterval(intervalId);
});
// Retomar o intervalo quando o mouse sai do banner
banner.addEventListener('mouseout', () => {
intervalId = setInterval(showRandomImage, 3000);
});
</script>
</body>
</html>>
2 horas atrás, Williams Duarte disse:
Corrigido, peço que, para futuras consultas, evite abrir múltiplos tópicos sobre o mesmo assunto, senão consegue resolver aguarde um pouco. Isso nos ajudará a manter o fórum organizado e a garantir que cada questão receba a atenção adequada.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transição Suave entre Imagens</title>
<style>
#banner {
width: 240px;
height: 480px;
overflow: hidden;
position: relative;
}
.banner-link {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition: opacity 1s ease-in-out;
opacity: 0;
z-index: 1; /* Todos começam no fundo */
}
.banner-link.active {
opacity: 1;
z-index: 2; /* Somente o ativo fica no topo */
}
.banner-link img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<div id="banner">
<a href="https://example.com/link1" class="banner-link active"><img src="https://via.placeholder.com/240x480?text=Image+1" alt="Image 1"></a>
<a href="https://example.com/link2" class="banner-link"><img src="https://via.placeholder.com/240x480?text=Image+2" alt="Image 2"></a>
<a href="https://example.com/link3" class="banner-link"><img src="https://via.placeholder.com/240x480?text=Image+3" alt="Image 3"></a>
<!-- Adicione mais imagens conforme necessário -->
</div>
<script>
const banner = document.getElementById('banner');
const links = document.querySelectorAll('.banner-link'); // Seleciona todos os links
let currentIndex = 0; // Começa na primeira imagem
function showRandomImage() {
// Esconde o link (e a imagem dentro dele) atual
links[currentIndex].classList.remove('active');
// Seleciona um novo link (e imagem) aleatório diferente do atual
let randomIndex;
do {
randomIndex = Math.floor(Math.random() * links.length);
} while (randomIndex === currentIndex);
// Mostra o novo link (e imagem)
links[randomIndex].classList.add('active');
// Atualiza o índice do link (e imagem) atual
currentIndex = randomIndex;
}
showRandomImage(); // Mostra a primeira imagem
let intervalId = setInterval(showRandomImage, 3000); // Altera a imagem a cada 3 segundos
// Pausar o intervalo quando o mouse está sobre o banner
banner.addEventListener('mouseover', () => {
clearInterval(intervalId);
});
// Retomar o intervalo quando o mouse sai do banner
banner.addEventListener('mouseout', () => {
intervalId = setInterval(showRandomImage, 3000);
});
</script>
</body>
</html>
Nada foi resolvido, mesmo assim obrigado !>
1 hora atrás, Biel. disse:
Nada foi resolvido, mesmo assim obrigado !
Pelo que percebi, você buscou um script na internet e está tentando adaptá-lo às suas necessidades. No entanto, identifiquei que as transições não estão funcionando devido a vários problemas no seu código anterior. Sugeri duas soluções, sendo a última mais direta e eficaz. Entendo que, como o script é bastante diferente do que você encontrou originalmente, você pode estar tendo dificuldades para compreendê-lo devido a algumas limitações. É importante frisar que o conhecimento em JavaScript é essencial aqui, pois só assim você conseguirá entender completamente o código e realizar as modificações necessárias.
Caso continue enfrentando dificuldades, talvez seja interessante considerar a contratação de um freelancer especializado. Eles podem oferecer o suporte técnico necessário para resolver esses problemas de forma eficiente, já que esta situação parece exigir uma assistência mais dedicada do que a que podemos oferecer aqui gratuitamente.
>
23 horas atrás, Williams Duarte disse:
Corrigido, peço que, para futuras consultas, evite abrir múltiplos tópicos sobre o mesmo assunto, senão consegue resolver aguarde um pouco. Isso nos ajudará a manter o fórum organizado e a garantir que cada questão receba a atenção adequada
Hora você diz que corrigiu o problema e hora você diz que o problema está no código que postei. Se o código que postei está errado ou imcompleto, então você não corrigiu coisa alguma e pelo visto também não sabe o caminho para chegar na solução. Você realmente é incrível , tem resposta pra tudo !
Percebi algum tempo atrás, que você tem uma tendência em rejeitar soluções que não se originam de seu próprio trabalho. Essa abordagem te limita em capacidade de aprendizado e crescimento na programação, um campo que se beneficia imensamente da colaboração e da troca de conhecimentos. Estar aberto a diferentes métodos e soluções não apenas enriquece sua base de conhecimento, mas também aprimora suas habilidades de resolução de problemas.
Veja oque você ignorou funcionando:
https://codepen.io/William-Duarte-the-decoder/pen/bGZjZKq
Agora senão sabe trocar uma imagem ou link de exemplo, paciência!
Veja o quanto você rejeita qualquer pergunta ou resposta feita:
https://forum.imasters.com.br/topic/588664-carregar-imagem/
Veja o quanto fica ainda mais evidente que não sabe javascript básico:
https://forum.imasters.com.br/topic/588672-servir-vários-banners-com-um-script/
Veja aqui a recomendação de um curso básico na Udemy, onde aprendera usar forEach para "Servir os banners" ou é manipular? rsrs
https://www.udemy.com/course/curso-web/
>
19 horas atrás, Williams Duarte disse:
Veja oque você ignorou funcionando:
https://codepen.io/William-Duarte-the-decoder/pen/bGZjZKq
Agora senão sabe trocar uma imagem ou link de exemplo, paciência!
Você tem dificuldade de interpretação. Nada foi resolvido. Nota: Você está adicionando recursos que não pedi e tirou o aleatório que postei , distanciando ainda mais da solução, mas na sua cabeca estou rejeitando soluções que não se originam do meu trabalho. É inacreditável como você é apelativo, qualquer um percebe isso facilmente !
>
5 horas atrás, Williams Duarte disse:
Veja o quanto você rejeita qualquer pergunta ou resposta feita:
https://forum.imasters.com.br/topic/588664-carregar-imagem/
O que postei foi: Selecionar uma imagem qualquer no input1 e carregar automaticamente a mesma imagem no input2.
Sua solução carrega somente um input1 e exibe duas imagens e você quer que eu valide o que você apresentou? Porque sua interpretação está correta e a minha errada? Parabens para você!
Vai lá meche no código e posta aqui dizendo que eu tenho a tendência em rejeitar soluções que não se originam do meu trabalho.
Acho que você tem demência, a quantos anos esta nesta vibe de tabela_aprendiz?
Sobre "interpretação", leia direito, entenda o contexto, senão entender leia novamente!
Senão entender ainda, copie e cole um trecho do que eu disse abaixo "restrições de segurança dos navegadores" e cole no google
Veja o que eu disse, e não é você quem ira mudar isto.
"Replicar a imagem selecionada no primeiro input para o segundo, e diretamente isso não é viável devido às restrições de segurança dos navegadores. Eles não permitem que scripts manipulem arquivos de input de forma direta por razões de privacidade."
Vou faciltar sua vida porque tu gosta de coisa mastigada:
Leia aqui: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file
>
Citar
-
You cannot set the value of a file picker from a script — doing something like the following has no effect:
JSCopy to Clipboard
const input = document.querySelector("input[type=file]");
input.value = "foo";-
When a file is chosen using an <input type="file">, the real path to the source file is not shown in the input's value attribute for obvious security reasons. Instead, the filename is shown, with C:\fakepath\ prepended to it. There are some historical reasons for this quirk, but it is supported across all modern browsers, and in fact is [defined in the spec](https://html.spec.whatwg.org/multipage/forms.html#fakepath-srsly).
E é notório que em todo este tempo, não estudou o básico de Javascript e nem PHP.https://forum.imasters.com.br/topic/588653-rodar-código-php-em-servidores-diferentes/
E eu que tenho problemas de interpretação! rsrsrs
>
Em 08/02/2024 at 00:42, Williams Duarte disse:
Acho que você tem demência, a quantos anos esta nesta vibe de tabela_aprendiz?
Você não tem mais argumento e agora focou em pontos irrelevantes. Sempre dei o nome de tabela_aprendiz por motivos que não convém que você saiba; e você sempre achou isso ridículo ? Qual nome de tabela você segere que eu coloque nos meus próximos posts? Era só o que me faltava.
>
Em 08/02/2024 at 00:42, Williams Duarte disse:
Replicar a imagem selecionada no primeiro input para o segundo, e diretamente isso não é viável devido às restrições de segurança dos navegadores. Eles não permitem que scripts manipulem arquivos de input de forma direta por razões de privacidade
O certo é trazer a solução de acordo com a pergunta e acrescentar: O que você pediu é possível fazer, segue o exemplo e colocar uma nota tipo: Mais não é viável que manipule input file desta forma devido às restrições de segurança dos navegadores. Você não responde de acordo com minha pergunta e quer que eu concorde, porque não é viável devido às restrições de segurança dos navegadores. Nota: Responda somente o que for perguntado e acrescente uma observação se julgar necessário e deixe que o colega decida o que fazer. Vale lembrar também que você não sabe se é para rodar locahost, se é para teste visando outras questões e muitos outras possibilidades. Mais você se acha capaz de saber o real objetivo da postagem a ponto de fazer toda apelação possível para que o colega valide seu post. Quanta agressividade!
Qualquer pessoa que tem bom senso entende claramente meu ponto de vista e percebe facilmente o quanto você é apelativo! É feio e nos traz resultados ruins para nossa vida de modo geral ser apelativo com razão, agora imagina sem razão! Não vou interagir com pessoas apelativas!!! Não vale a pena.
No seu CSS
.banner-link img {// Inicialize todos os links como ocultos, exceto o primeiro
showRandomImage(); // Mostra a primeira imagem
setInterval(showRandomImage, 3000); // Altera a imagem a cada 3 segundos
No HTML, você pode colocar cada imagem dentro de um elemento de link:
<!DOCTYPE html>