transição suave
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>Discussão (11)
Carregando comentários...