¿Cómo rotar aleatoriamente imágenes en HTML?

villabull · 25 Jun 2014

Hola quisiera saber como puedo hacer para rotar aleatoriamente imágenes, espero puedan ayudarme.

Tengo 6 imágenes así:
<img src="imagen1"> <img src="imagen2">
<img src="imagen3"> <img src="imagen4">
<img src="imagen5"> <img src="imagen6">

Y quisiera que cada vez que se presione F5 se muevan de posición aleatoriamente, así:
<img src="imagen5"> <img src="imagen1">
<img src="imagen2"> <img src="imagen6">
<img src="imagen3"> <img src="imagen4">

Se puede hacer eso en html o tendria que hacerse en php?

Gracias por sus comentarios!

zcriptz · 25 Jun 2014

PHP:

<?php

$imagenes = array('imagen.gif', 'imagen2.gif', 'imagen3.gif');
shuffle($imagenes);

foreach($imagenes as $imagen){ ?>
<img src="<?=$imagen?>">
<? } ?>

hugo1 · 25 Jun 2014

Aunque lo haría como respondio zcriptz, también puedes hacerlo con Javascript

Insertar CODE, HTML o PHP:

<div id="imagenes"></div>

<script>
var imagenes_array = null;
var imagenes = '';

imagenes_array = [
				'imagen1.jpg',
    				'imagen2.jpg',
    				'imagen3.jpg',
    				'imagen4.jpg',
    				'imagen5.jpg',
    				'imagen6.jpg'
    			];

// http://jsfromhell.com/array/shuffle
shuffle = function(v)
{
    for(var j, x, i = v.length; i; j = parseInt(Math.random() * i), x = v[--i], v[i] = v[j], v[j] = x);
    return v;
};

imagenes_array = shuffle(imagenes_array);

for(var i=0; i<imagenes_array.length; i++) imagenes += '<img src="'+ imagenes_array[i] +'" />';

document.getElementById('imagenes').innerHTML = imagenes;
</script>

villabull · 25 Jun 2014

Gracias Zcript pense que se podria con html, porque quisiera también agregarle link a la imagen, en este caso como seria?
Mi pagina web la estoy haciendo en html + css

zcriptz dijo:

Gracias hugo1, como hago para agregar un enlace a la imagen? también se puede?

hugo1 dijo:

Aunque lo haría como respondio zcriptz, también puedes hacerlo con Javascript

Insertar CODE, HTML o PHP:

<div id="imagenes"></div>

<script>
var imagenes_array = null;
var imagenes = '';

imagenes_array = [
				'imagen1.jpg',
    				'imagen2.jpg',
    				'imagen3.jpg',
    				'imagen4.jpg',
    				'imagen5.jpg',
    				'imagen6.jpg'
    			];

// http://jsfromhell.com/array/shuffle
shuffle = function(v)
{
    for(var j, x, i = v.length; i; j = parseInt(Math.random() * i), x = v[--i], v[i] = v[j], v[j] = x);
    return v;
};

imagenes_array = shuffle(imagenes_array);

for(var i=0; i<imagenes_array.length; i++) imagenes += '<img src="'+ imagenes_array[i] +'" />';

document.getElementById('imagenes').innerHTML = imagenes;
</script>

nullPointer · 25 Jun 2014

Con permiso de hugo1, ya que voy a reutilizar su código, te respondo:

Insertar CODE, HTML o PHP:

<div id="imagenes"></div>

<script>
var imagenes_array = null;
var imagenes = '';

[B][COLOR="#FF0000"]var imagenes_array = [
        ['mi_enlace1.html', 'imagen1.jpg'],
        ['mi_enlace2.html', 'imagen2.jpg'],
        ['mi_enlace3.html', 'imagen3.jpg'],
        ['mi_enlace4.html', 'imagen4.jpg'],
        ['mi_enlace5.html', 'imagen5.jpg'],
        ['mi_enlace6.html', 'imagen6.jpg']
    ];[/COLOR][/B]

// http://jsfromhell.com/array/shuffle
shuffle = function(v)
{
    for(var j, x, i = v.length; i; j = parseInt(Math.random() * i), x = v[--i], v[i] = v[j], v[j] = x);
    return v;
};

imagenes_array = shuffle(imagenes_array);

for(var i=0; i<imagenes_array.length; i++) imagenes += [B][COLOR="#FF0000"]'<a href="' + imagenes_array[i][0] + '"><img src="'+ imagenes_array[i][1] +'" /></a>';[/COLOR][/B]

document.getElementById('imagenes').innerHTML = imagenes;
</script>

Un saludo.

zcriptz · 25 Jun 2014

Te recomiendo con PHP sino Google no indexará esas paginas :encouragement:

villabull · 27 Jun 2014

nullPointer dijo:
Con permiso de hugo1, ya que voy a reutilizar su código, te respondo:

Un saludo.

Gracias, si quiero agregar más en el código html tengo que poner "," o ";" o simplemente una tras otra sin dividirlas?

zcriptz dijo:
Te recomiendo con PHP sino Google no indexará esas paginas :encouragement:

Gracias zcriptz, como se haría en php agregando el link a las imagenes?

zcriptz · 27 Jun 2014

villabull dijo:
Gracias zcriptz, como se haría en php agregando el link a las imagenes?

Solo lo agregas...

Por ejemplo:

PHP:

<a href="link.php?imagen=<?=$imagen?>"><img src="<?=$imagen?>"></a>

villabull · 28 Jun 2014

zcriptz dijo:
Solo lo agregas...

Por ejemplo:

PHP:

<a rel="nofollow" href="link.php?imagen=<?=$imagen?>"><img src="<?=$imagen?>"></a>

Pero si el link es hacia una pagina no hacia la imagen?
Disculpa si molesto tanto.

zcriptz · 28 Jun 2014

villabull dijo:
Pero si el link es hacia una pagina no hacia la imagen?
Disculpa si molesto tanto.

Con lo que te di puedes hacerlo. Tu querías saber como hacerlo, no que te lo hagan -.-"

cesarneitor · 28 Jun 2014

y entiendo que es php pero no entiendo el como, ya que html es mas estatico y desarrollo web por lo que es mas de escritura y no para manipular asi, ya que se requiere mas de programacion web como php

maduranma · 4 Jul 2014

Puedes hacerlo con JavaScript (no es necesario instalar nada, es decir, no es nada externo al navegador):

Insertar CODE, HTML o PHP:

<div id="imagenes"></div>
<script>
var num = [];
var numeroInicial = 1;
var numeroFinal = 6;
while(numeroInicial <= numeroFinal)
{
	num[num.length]= numeroInicial;
	numeroInicial++;
}
function shuffle(o)
{
	for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
	return o;
}
var html = '';
num = shuffle(num);
num.forEach(function(i) {
	html += '<a href="http://www.algo.com"><img src="imagen' + i + '" alt="Título"></a>';
});
document.getElementById('imagenes').innerHTML = html;
</script>

O si no, puedes hacerlo con PHP:

PHP:

<?php
$num = range(1, 6);
shuffle($num);
foreach ($num as $i) //Cambia el 6 por el número de foto si algún día necesitas
{
    echo '<a href="http://www.algo.com"><img src="imagen' . $i . '" alt="Título"></a>';
}
?>

villabull · 15 Sep 2014

maduranma dijo:

Puedes hacerlo con JavaScript (no es necesario instalar nada, es decir, no es nada externo al navegador):

Insertar CODE, HTML o PHP:

<div id="imagenes"></div>
<script>
var num = [];
var numeroInicial = 1;
var numeroFinal = 6;
while(numeroInicial <= numeroFinal)
{
	num[num.length]= numeroInicial;
	numeroInicial++;
}
function shuffle(o)
{
	for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
	return o;
}
var html = '';
num = shuffle(num);
num.forEach(function(i) {
	html += '<a rel="nofollow" href="http://www.algo.com"><img src="imagen' + i + '" alt="Título"></a>';
});
document.getElementById('imagenes').innerHTML = html;
</script>

O si no, puedes hacerlo con PHP:

PHP:

<?php
$num = range(1, 6);
shuffle($num);
foreach ($num as $i) //Cambia el 6 por el número de foto si algún día necesitas
{
    echo '<a rel="nofollow" href="http://www.algo.com"><img src="imagen' . $i . '" alt="Título"></a>';
}
?>

Gracias.
Si quiero agregar mas imagenes seria asi:

PHP:

{
    echo '<a rel="nofollow" href="http://www.algo.com"><img src="imagen' . $i . '" alt="Título"></a>';
'<a rel="nofollow" href="http://www.algo.com"><img src="imagen' . $i . '" alt="Título"></a>';
'<a rel="nofollow" href="http://www.algo.com"><img src="imagen' . $i . '" alt="Título"></a>';
}

o como?