colocar imagens do banner no html
Olá pessoal. O banner abaixo está funcionando normalmente,, mas quero fazer o seguinte: Colocar as imagens diretamente no html e mostrar o link da imagem que está passando.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>colocar imagens do banner no html</title>
<style>
#banner {
width: 240px;
height: 480px;
overflow: hidden;
position: relative;
}
.banner-img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
transition: opacity 0.5s ease-in-out;
}
.banner-link {
display: block;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="banner"></div>
<!-- <div id="banner">
<a href="link147"><img class="banner-img" src="imagem1.png" alt="Image 1"></a>
<a href="link254"><img class="banner-img" src="imagem2.png" alt="Image 2"></a>
<a href="link350"><img class="banner-img" src="imagem3.png" alt="Image 3"></a>
<a href="link462"><img class="banner-img" src="imagem4.png" alt="Image 4"></a>
<a href="link538"><img class="banner-img" src="imagem5.png" alt="Image 5"></a>
</div> -->
<script>
// const images = document.querySelectorAll('.banner-img');
// const randomIndex = Math.floor(Math.random() * images.length);
const images = [
"imagem1.png",
"imagem2.png",
"imagem3.png",
"imagem4.png",
"imagem5.png"
];
const banner = document.getElementById('banner');
function showRandomImage() {
const randomIndex = Math.floor(Math.random() * images.length);
const imageUrl = images[randomIndex];
const imgElement = document.createElement('img');
imgElement.src = imageUrl;
imgElement.alt = "Random Image";
imgElement.classList.add('banner-img');
const linkElement = document.createElement('a');
linkElement.classList.add('banner-link');
linkElement.href = randomIndex + 1;
linkElement.appendChild(imgElement);
banner.innerHTML = ''; // Limpa o conteúdo anterior
banner.appendChild(linkElement);
}
showRandomImage(); // Exibir uma imagem aleatória inicial
setInterval(showRandomImage, 2000); // Alterar a imagem aleatória a cada 2 segundos
</script>
</body>
</html>Discussão (2)
Carregando comentários...