Mostrar imágenes aleatoriamente es una técnica muy utilizada. Por ejemplo, se muestran banners aleatorios cuando ingresa a un sitio web, su banner siempre es diferente o siempre hay consejos con contenido diferente. A menudo encontrará ejemplos de este tipo al navegar por Internet. Con esta tecnología, no sólo se puede colocar más contenido en un espacio determinado, sino que también puede dar a las personas la ilusión de actualizaciones frecuentes.
¿Qué tan emocionado estás? De hecho, siempre que tengas un poco de conocimiento básico de html y javascript, todo es muy sencillo. Sígueme y echemos un vistazo a sus secretos aleatorios.
Comencemos con un ejemplo simple. Normalmente agregamos imágenes a la página usando <img src="picture">. Si queremos mostrar aleatoriamente 3 imágenes diferentes, debemos hacer una pequeña modificación a este código. Primero, agregue la etiqueta <script>:
El siguiente es un fragmento citado:
<lenguaje de escritura=javascript></script>
Luego coloque <img src="picture"> en esta etiqueta usando document.write(""), y se convertirá
documento.write("<img src=imagen>")
Ahora terminemos el párrafo más crítico:
aquí está la cita:
id=Matemáticas.ronda(Matemáticas.aleatorio()*2)+1
De esta manera, los números aleatorios se obtienen como 1, 2 y 3. Cambie el nombre de la imagen que desea mostrar a 1.gif, 2.gif, 3.gif, ¡vale! El código final es:
Aquí está el fragmento de cita:
<lenguaje de escritura=javascript>
id=Matemáticas.ronda(Matemáticas.aleatorio()*2)+1
documento.write("<img src="+id+".gif>")
</script>
Pruébalo, ¿no es bueno? ¿Y qué pasa si cada una de mis imágenes corresponde a un hipervínculo?
Supongamos que hay 3 imágenes, 1.gif, 2.gif, 3.gif, y los enlaces correspondientes son url1, url2 y url3.
Para tener una correspondencia uno a uno entre imágenes y enlaces, necesitamos configurar una imagen de matriz para colocar la dirección del enlace, de la siguiente manera:
El siguiente es un fragmento de referencia:
var imagen = nueva matriz (3)
imagen.longitud=3
imagen[1]="url1"
imagen[2]="url2"
imagen[3]="url3"
Para obtener el enlace correspondiente a la imagen, también necesitamos definir una matriz imageurl=image[id]
El principio es este:
Cuando se lee la página, se toma un número aleatorio, suponiendo que sea 2, es decir, id = 2, entonces podemos mostrar fácilmente 2.gif en la página como se muestra arriba. Luego podemos ver: imageurl=image[2] e image[2]="url2", el resto es fácil. El código completo es el siguiente:
El siguiente es un fragmento citado:
<lenguaje de escritura=javascript>
var imagen = nueva matriz (3)
imagen.longitud=3
imagen[1]="url1"
imagen[2]="url2"
imagen[3]="url3"
id=Matemáticas.ronda(Matemáticas.aleatorio()*2)+1
URL de imagen=imagen[id]
document.write("<a href="+bannerurl+">"+"<img src="+id+".gif>")
</script>
Reimpreso de: Diseño de pájaros de siete colores---pc-king