Me gustaría mostrar una imagen aleatoria con un texto relativo cada vez que cargo la página. Entonces, para tener Image1 con text1, Image2 con text2 ...
Aquí está mi código:
html:
<link href="app.css" rel="stylesheet" /> <script src="random-picture.js"></script> <div class=" content-with-two-section-2 content-1 padding-top-8 grey-background "> <div class="hero-content-with-image"> <img id="randomImages" alt="hero-image"> </div> <div class=""> <div id="" class="section-text-1"> <h1>RANDOM 1 <p>random1</p> </div> </div> <div class=""> <div id="" class="section-text-2"> <h1>RANDOM 2 <p>random2</p> </div> </div> <div class=""> <div id="" class="section-text-3"> <h1>RANDOM 3 <p>random3</p> </div> </div> </div>Puse todas las clases como display:none; en mi archivo css:
.section-text-1, .section-text-2, .section-text-3 { display: none; }Y este es mi archivo js:
var image = new Array(); image[0] = "image1.png"; image[1] = "image2.png"; image[2] = "image3.png"; var size = image.length var x = Math.floor(size * Math.random()) jQuery('#randomImages').attr('src', image[x]);Muchas gracias por tu ayuda !!!!
Puedes hacer lo siguiente:
No es necesario enumerar los nombres de las clases (puede usar '.section-text' solo, porque después de consultar obtendrá una matriz con índices correspondientes al orden de los elementos en DOM).
const sources = [ 'image1.png', 'image2.png', 'image3.png' ]; const img = document.getElementById('randomImages'); const sections = document.getElementsByClassName('section-text'); const index = Math.floor(sources.length * Math.random()); img.alt = sources[index]; img.src = sources[index]; sections[index].style.display = 'block'; .section-text { display: none; } <div class="content-with-two-section-2 content-1 padding-top-8 grey-background"> <div class="hero-content-with-image"> <img id="randomImages"> </div> <div> <div class="section-text"> <h1>RANDOM 1</h1> <p>random1</p> </div> </div> <div> <div class="section-text"> <h1>RANDOM 2</h1> <p>random2</p> </div> </div> <div> <div class="section-text"> <h1>RANDOM 3</h1> <p>random3</p> </div> </div> </div>Como alternativa (sugerido en los comentarios):
const sources = [ { src: 'image1.png', title: 'Image 1', text: 'This is text 1' }, { src: 'image2.png', title: 'Image 2', text: 'This is text 2' }, { src: 'image3.png', title: 'Image 3', text: 'This is text 3' } ]; const image = document.getElementById('image'); const title = document.getElementById('title'); const text = document.getElementById('text'); const index = Math.floor(sources.length * Math.random()); const source = sources[index]; image.alt = source.src; image.src = source.src; title.innerText = source.title; text.innerText = source.text; <div class="content-with-two-section-2 content-1 padding-top-8 grey-background"> <div class="hero-content-with-image"> <img id="image"> </div> <div> <div class="section-text"> <h1 id="title"></h1> <p id="text"></p> </div> </div> </div>Debe usar algún tipo de algoritmo de barajado para generar imágenes aleatorias.
function randomPic(arr){ const arrLength = arr.length; for (let i = 0; i < 100; i++ ) { const indexOne = Math.floor(Math.random() * arrLength); const indexTwo = Math.floor(Math.random() * arrLength); const tempValue = arr[indexOne]; arr[indexOne] = arr[indexTwo]; arr[indexTwo] = tempValue } return arr } const sources = [ { src: 'https://image1.png', title: 'Title 1', text: 'This is text 1' }, { src: 'https://image2.png', title: 'Title 2', text: 'This is text 2' }, { src: 'https://image3.png', title: 'Title 3', text: 'This is text 3' } ]; console.log(randomPic(sources))