Intenté mostrar una lista de imágenes, pero cada vez que la página se actualiza, el orden de las imágenes cambia aleatoriamente, excepto la que tiene un nombre de clase diferente. Escribí este código pero me da una imagen duplicada.
Quiero 3 cosas:
mostrar todas las imágenes sin duplicados.
darles un orden aleatorio cada vez que actualizo la página.
el que tiene un nombre de clase diferente no cambia de posición.
.ppl{ ancho: 250px; } var images = [], index = 0; images[0] = "<img class='ppl pos' src='images/1.jpg' >"; images[1] = "<img class='ppl pos' src='images/2.jpg' >"; images[2] = "<img class='ppl pos' src='images/3.jpg' >"; images[3] = "<img class='ppl n-pos' src='images/g.jpg' >"; images[4] = "<img class='ppl pos' src='images/4.jpg' >"; function myFunction() { for (var i = 0; i < images.length; i++) { index = Math.floor(Math.random() * images.length); document.write(images[index]); } } debugger; myFunction(); </script> const images = [ 'images/1.jpg', 'images/2.jpg', 'images/3.jpg', 'images/g.jpg', 'images/4.jpg' ] const root = document.querySelector('#root') const shuffle = ([...array]) => { let currentIndex = array.length let temporaryValue let randomIndex // While there remain elements to shuffle... while (currentIndex !== 0) { // Pick a remaining element... randomIndex = Math.floor(Math.random() * currentIndex) currentIndex -= 1 // And swap it with the current element. temporaryValue = array[currentIndex] array[currentIndex] = array[randomIndex] array[randomIndex] = temporaryValue } return array } const shuffledImages = shuffle(images) shuffledImages.forEach(src => { const image = document.createElement('img') image.src = src image.alt = src image.classList.add('ppl') image.classList.add('pos') root.appendChild(image) }) .ppl { width: 250px; } <div id="root"></div>