banner
Olá pessoal. O banner abaixo está funcionando e o link acompanha o banner, até aqui tudo ok ! Quero muito fazer uma transição suave entre uma image e outra, colocando as propiedades e valores no css ou diretamente no javascript e nada de propiedades e valores no html através do style . Se possível coloque no código somente o que precisa . Obrigado!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Banner</title>
<style>
/* Estilos opcionais para o banner */
.banner {
width: 240px;
height: 480px;
overflow: hidden;
position: relative;
}.banner img {
width: 100%;
height: auto;
position: absolute;
top: 0;
left: 0;
transition: 1.5s ease-in;
}.banner img.active {
opacity: 1;
}
</style>
</head>
<body>
<div class="banner" id="banner">
<a href="link1" class="ggg"><img src="image1.jpg" alt="Imagem 1"></a>
<a href="link2" class="ggg"><img src="image2.jpg" alt="Imagem 2"></a>
<a href="link3" class="ggg"><img src="image3.jpg" alt="Imagem 3"></a>
<a href="link4" class="ggg"><img src="image4.jpg" alt="Imagem 4"></a>
<a href="link5" class="ggg"><img src="image5.jpg" alt="Imagem 5"></a>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
var banner = document.getElementById("banner");
var images = banner.querySelectorAll("img");
// Função para exibir uma imagem aleatória
function showRandomImage() {
// Escolhe aleatoriamente um índice de imagem
var randomIndex = Math.floor(Math.random() * images.length);
// Define todas as imagens como ocultas
images.forEach(function(img) {
img.style.display = "none";
});
// Exibe a imagem aleatória
images[randomIndex].style.display = "block";
}
// Chama a função inicialmente e define um intervalo para exibir novas imagens a cada 3 segundos
showRandomImage();
setInterval(showRandomImage, 3000);
});
</script>
</body>
</html>Discussão (0)
Carregando comentários...