<!DOCTYPE html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="imagenes"></div>
</body>
</html>
<script>
// Función obtenida de: http://lwp-l.com/s6137
const random = (from, to, quatity) => {
const elem=Array.from(Array(to+1-from), (el,i) => i+from);
return Array.from({length: quatity}).map(() => elem.splice(Math.floor(Math.random()*elem.length), 1)[0]);
};
function mostrar5ImagenesAleatorias() {
const imagenes=[
["img_1.jpg", "texto imagen 1", "pagina1.html"],
["img_2.jpg", "texto imagen 2", "pagina2.html"],
["img_3.jpg", "texto imagen 3", "pagina3.html"],
["img_4.jpg", "texto imagen 4", "pagina4.html"],
["img_5.jpg", "texto imagen 5", "pagina5.html"],
["img_6.jpg", "texto imagen 6", "pagina6.html"],
["img_7.jpg", "texto imagen 7", "pagina7.html"],
["img_8.jpg", "texto imagen 8", "pagina8.html"],
["img_9.jpg", "texto imagen 9", "pagina9.html"],
["img_10.jpg", "texto imagen 10", "pagina10.html"],
["img_11.jpg", "texto imagen 11", "pagina11.html"],
["img_12.jpg", "texto imagen 12", "pagina12.html"],
["img_13.jpg", "texto imagen 13", "pagina13.html"],
["img_14.jpg", "texto imagen 14", "pagina14.html"],
["img_15.jpg", "texto imagen 15", "pagina15.html"],
["img_16.jpg", "texto imagen 16", "pagina16.html"],
["img_17.jpg", "texto imagen 17", "pagina17.html"],
["img_18.jpg", "texto imagen 18", "pagina18.html"],
["img_19.jpg", "texto imagen 19", "pagina19.html"],
["img_20.jpg", "texto imagen 20", "pagina20.html"]
];
// obtenemos 5 valores aleatorios diferentes entre 0 y 19
const valores=random(0, 19, 5);
const div=document.getElementById("imagenes");
// mostramos las 5 imagenes aleatorias
valores.forEach(i => {
const nDiv=document.createElement("div");
const nA=document.createElement("a");
const nImg=document.createElement("img");
nA.href=imagenes[i][2];
nImg.src=imagenes[i][0];
nImg.title=imagenes[i][1];
nA.appendChild(nImg);
nDiv.appendChild(nA);
div.appendChild(nDiv);
});
}
window.addEventListener("DOMContentLoaded", mostrar5ImagenesAleatorias);
</script>
Comentarios sobre la versión: 1 (0)
No hay comentarios